How to convert to kebab-case
- Paste a phrase, a camelCase or snake_case name, or a list of names, one per line.
- Press the highlighted kebab-case button: words become lowercase and are joined by hyphens.
- Copy and paste into your stylesheet, component or file name.
Where kebab-case is used
kebab-case, sometimes called dash-case or lisp-case, joins lowercase words with hyphens, like words on a skewer: "Main Navigation Bar" becomes main-navigation-bar. It is the convention for CSS class names and custom properties, HTML data attributes and custom elements, npm package names, command-line options and many file and folder names. In web addresses, hyphens are Google's recommended word separator, which makes kebab-case the natural style for page slugs.
The converter recognises word boundaries in camelCase and snake_case names as well as spaces, so you can translate between styles, for example turning JavaScript property names into CSS class names. For full URL slugs, with accents converted and stop words optionally removed, use our Slug Generator, which is designed for that job.
The conversion runs entirely in your browser.
FAQ
Why is it called kebab-case?
The hyphens look like a skewer running through the words.
Can CSS class names use camelCase?
They can, but kebab-case is the widespread convention and matches CSS property names.
Is kebab-case good for URLs?
Yes. Google recommends hyphens rather than underscores to separate words in URLs.