kebab-case Converter

Lowercase words joined with hyphens, like main-nav-link.

0 words · 0 characters

Example

Before
Main Nav Link
primaryButtonHover
footer_social_icons
After
main-nav-link
primary-button-hover
footer-social-icons

Where kebab-case is used

kebab-case is used for CSS class names, HTML attributes, file names, command-line flags, and URLs. For URLs, the Slug generator also strips accents and punctuation.

How the conversion works

Each line is converted separately. The converter first splits the line into words: anything that isn't a letter or digit (spaces, underscores, hyphens, punctuation) is a word break, and so is each lowercase-to-uppercase change in camelCase or PascalCase input. The words are then lowercased and joined with single hyphens, so primaryButtonHover and Primary Button Hover both become primary-button-hover.

kebab-case vs. snake_case

Most programming languages can't use hyphens in variable names, because the hyphen means minus. That is why code uses snake_case or camelCase, while kebab-case is used where names are plain text, such as CSS, HTML, and URLs. Google treats hyphens in URLs as word separators, which is why hyphenated URLs are the usual recommendation.