kebab-case is a naming convention where all letters are lowercase and words are separated by hyphens: "my-variable-name". It's named after the skewered meat because the hyphens resemble the skewer.

Where is kebab-case used?

kebab-case is standard for: CSS class names (.button-primary, .nav-link), HTML custom attributes (data-user-id), URL slugs (my-blog-post), HTML/CSS file names, and some config systems. It's also common in Ruby on Rails routing.

What is the difference between kebab-case and slug?

They're nearly identical. A URL slug is essentially kebab-case for URLs, but slug generation also removes special characters, diacritics (é → e), and applies additional normalization. Use our Slug Generator for URL-specific needs.

Can I use kebab-case in JavaScript variable names?

No. JavaScript identifiers cannot contain hyphens (they're interpreted as minus signs). For JS variables, use camelCase or snake_case instead.

How does the converter handle existing delimiters?

The converter handles spaces, underscores, dots, and existing hyphens as separators, and splits camelCase/PascalCase at uppercase boundaries. Any input format produces consistent kebab-case output.

Is my text stored on your servers?

No. All conversion happens in your browser. Your text never leaves your device.

kebab-case Converter

Convert text to kebab-case for CSS classes, HTML IDs, and URLs. Free online kebab-case converter, no signup needed.

🔒 Your text stays in your browser - nothing is sent to our servers

Input

0Characters

0No spaces

0Words

0Sentences

0Lines

< 1 minRead time

Result

How to Use

Three steps to get started

Paste your text

Enter a phrase, camelCase, or any text format.

Converts to kebab-case

All words lowercased and joined with hyphens. Other separators removed.

Copy the identifier

Click Copy and paste into your CSS, HTML, or URL.

About This Tool

kebab-case: the choice for CSS and URLs

kebab-case is a naming convention in which words are written in lowercase and joined by hyphens - add-to-cart, hero-section, getting-started. It is sometimes called dash-case, lisp-case, or spinal-case. Its defining trait is that the hyphen is legal and unambiguous in the places snake_case and camelCase are not: inside URLs, CSS selectors, HTML attributes, DNS labels, and package registries.

Places where kebab-case is not merely preferred but effectively required:

Custom HTML elements - the spec mandates a hyphen: <user-card> is valid, <usercard> is not
CSS properties and custom properties - background-color, --brand-accent-500
data-* and aria-* attributes - data-user-id, aria-labelledby
npm package names - the registry rejects uppercase: react-query, next-auth
Kubernetes object names - RFC 1123 label rules allow only lowercase alphanumerics and hyphens
CLI flags - --dry-run, --max-old-space-size

Hyphens vs underscores in URLs

For URL slugs the choice is not cosmetic. Google's own URL structure guidance has recommended hyphens over underscores for years, on the grounds that a hyphen is treated as a word separator while an underscore historically joined tokens - /blue_widgets could be read as the single token blue_widgets, whereas /blue-widgets reads as two words. Hyphens are also unreserved characters under RFC 3986, so they survive URLs untouched, while spaces become %20 and other punctuation gets percent-encoded into noise.

Two gotchas worth knowing. First, kebab-case is illegal in JavaScript, Python, and most language identifiers, because the parser reads the hyphen as subtraction - this is why DOM code uses element.dataset.userId to reach a data-user-id attribute, and why CSS-in-JS libraries accept backgroundColor. Second, kebab-case is not the same as a full URL slug: a slug generator additionally strips diacritics (é → e), removes emoji and punctuation, collapses runs of hyphens, and trims leading or trailing ones. If you are generating permalinks, reach for the Slug Generator instead.

This tool takes any input shape - a headline, PascalCase, snake_case, or mixed delimiters - and emits consistent kebab-case, which makes it handy for mapping a camelCase component name onto its stylesheet class. Conversion happens in your browser with no upload step, no account, and no length limit.

FAQ

Frequently Asked Questions

Related Tools