kebab-case Converter
kebab-case (also called spiral case) lowercases words and joins them with hyphens. It is the usual shape for URL slugs, CSS class names, and data attributes in HTML—easy to read in a path segment.
Example
Input
Naïve Résumé Upload Form
Output
naïve-résumé-upload-form
How the conversion works
Separators and camelCase boundaries are detected the same way as snake_case. “Pricing Page CTA” becomes pricing-page-cta. Extra punctuation falls away so the slug stays tidy in a URL bar. Multi-word titles from a CMS export convert in one paste without hand-editing every hyphen. Long navigation labels compress into path segments that still hint at the original words. Punctuation that is not alphanumeric becomes a separator and disappears from the slug.
CSS and design tokens
Hyphenated names are easy to scan in stylesheets and avoid clashing with camelCase JavaScript identifiers. Pair with a prefix (for example btn-primary) if your design system needs one. Utility-first codebases still use kebab-case for custom properties and component roots. Hyphenated class names stay easy to scan beside camelCase JavaScript identifiers.
Unicode in slugs
Letters such as é remain in the output (café-menu). Some hosts still prefer ASCII-only URLs—transliterate separately if your CDN requires it. For purely internal class names, keeping accents is often fine and preserves meaning for multilingual teams. If your router forbids unicode, transliterate first, then convert—the hyphenation step stays the same. Hosts that require ASCII-only paths may still need a separate transliteration step.
Common use cases
- Building blog post URL slugs
- Naming BEM-style CSS classes
- Creating HTML data attribute values
- Aligning design-token names across tools
Frequently asked questions
How is kebab-case different from snake_case?
Only the joiner changes: hyphens instead of underscores. Word detection and lowercasing are the same.
Are spaces turned into hyphens?
Yes. Spaces, underscores, and most symbols become separators, then words rejoin with hyphens.
Will this encode URLs for me?
It produces a hyphenated slug. Percent-encoding for special hosts is not applied—browsers handle that when you navigate.
Can I convert a whole sitemap list?
Paste one title per line. Each line becomes its own kebab-case slug.
Does the tool store my slugs?
No. Text stays in your browser session unless you copy or download it.