Kebab Case Converter Online
kebab-case writes all words in lowercase and joins them with hyphens: “my-page-title” rather than “myPageTitle” or “my_page_title”. It is the standard format for URL slugs, CSS class names, HTML attributes, and most web-facing identifiers. Paste your text above and it converts instantly. Nothing is uploaded.
Related case converters
How the kebab-case converter works
Paste your text into the input panel and it converts to kebab-case automatically. Every letter is lowercased, spaces and underscores become hyphens, and special characters are stripped. Turn off auto-run and hit convert manually if you prefer to control when the conversion runs.
What kebab-case is
kebab-case is a naming convention where every word is lowercase and words are separated by hyphens. “Product launch date” becomes “product-launch-date”. The name is informal, a reference to words skewered together like pieces of meat on a kebab stick.
It goes by several other names depending on context. Dash-case and hyphen-case are the most common alternatives. Spinal-case, param-case, and Lisp-case refer to the same format. Train-Case is a related variant where each word is capitalized and separated by hyphens, used in HTTP header names like Content-Type and Accept-Language. ToolsGod converts to standard lowercase kebab-case.
Why kebab-case is the right format for URLs
Google’s search documentation explicitly states that hyphens are preferred over underscores in URLs because hyphens are treated as word separators. A URL like “example.com/web-design-tools” tells Google there are three separate words: web, design, tools. A URL like “example.com/web_design_tools” with underscores is treated as one long compound word. This affects how the page can rank for individual terms within that URL slug.
Beyond search indexing, hyphens are valid URL characters without encoding. Spaces in URLs get encoded as %20 or converted to plus signs depending on the context, which makes URLs harder to read and share. kebab-case produces clean, human-readable slugs that work natively in any URL without character encoding.
Where kebab-case is used
URL slugs are the most common use. Every page path on a well-structured website uses kebab-case: /blog/how-to-convert-text, /products/blue-running-shoes, /docs/getting-started. CMS platforms like WordPress, Shopify, and Webflow generate kebab-case slugs by default when you enter a page title.
CSS class names follow kebab-case by convention. BEM naming (block__element–modifier), utility class libraries, and most CSS frameworks use it throughout. Tailwind CSS class names are all kebab-case. Custom CSS properties use it too: –primary-color, –font-size-large, –border-radius-sm.
HTML attributes use kebab-case for data attributes and ARIA attributes. data-user-id, data-product-sku, aria-label, aria-expanded, and aria-hidden are all examples. The HTML specification requires custom data attribute names to use lowercase with hyphens, making kebab-case the only valid format.
Vue.js uses kebab-case for component names in templates. A component registered as “UserProfile” in JavaScript is referenced as “user-profile” in Vue HTML templates. This is the convention enforced by Vue’s official style guide.
File names in web projects often use kebab-case to stay consistent with URL paths and to avoid case sensitivity issues on Linux servers. A file named “ProductCard.jsx” and “productcard.jsx” are two different files on a Linux system but the same file on macOS. kebab-case avoids the problem entirely. If you need to convert a list of file names from another format, the snake_case converter shows the underscore alternative for contexts where underscores are preferred over hyphens.
Where kebab-case cannot be used
kebab-case is not valid for variable names, function names, or identifiers in most programming languages. The reason is simple: a hyphen is the subtraction operator in JavaScript, Python, Ruby, Java, and most others. A variable named “user-name” would be parsed as “user minus name”, not as an identifier. Use camelCase or snake_case for code identifiers and reserve kebab-case for the web layer. The camelCase converter handles the right format for JavaScript and Java variables.