This kebab-case converter lowercases your text and joins the words with hyphens — turning Main Nav Item into main-nav-item. It is the style used for URL slugs, CSS class names and HTML attributes.
How to use the kebab-case converter
- Paste a phrase or an identifier in any case.
- The kebab-case version appears instantly.
- Copy it into your CSS, HTML or URL.
What is kebab-case?
kebab-case — also called dash-case — writes lowercase words joined by hyphens, like main-nav-item. The name comes from the words looking skewered on a stick. Hyphens are the safe, readable separator for anything that appears in a URL or CSS, which is why it dominates class names, custom HTML attributes and file names on the web.
Examples
| Input | kebab-case |
|---|---|
| Main Nav Item | main-nav-item |
| primaryButtonColor | primary-button-color |
| hero_section_title | hero-section-title |