Kebab Case Converter — Text to kebab-case Online
Convert text to kebab-case online — the standard for CSS class names, HTML attributes, and URL slugs. Free, instant, client-side case converter.
🔒 100% Client-Side Processing
Your data is processed entirely in your browser and never transmitted to any server.
Input
Café Menu Items Output
cafe-menu-items Accents are folded to ASCII rather than stripped, so the slug stays readable instead of turning into percent-encoded bytes.
Common Use Cases
Creating CSS class names
Convert component or feature names into the kebab-case that stylesheets, BEM conventions and design token files use, so class names match the rest of the codebase.
Building URL slugs
Turn a page or article title into a lowercase hyphenated path segment that is URL-safe, readable in a shared link, and parsed as separate words by search engines.
Naming files and packages
Standardise repo file names, npm package names and Vue single-file components to the ecosystem convention, which requires lowercase and forbids spaces entirely.
Writing HTML data attributes
Convert a property name into the hyphenated form custom data attributes require, so data-user-profile maps cleanly onto the dataset key JavaScript exposes.
Frequently Asked Questions
- Why is kebab-case used for URLs and CSS?
- Hyphens are URL-safe without percent-encoding, and search engines treat them as word separators. CSS adopted the same convention for properties and class names — background-color, nav-item — and HTML attributes follow it too. The practical result is that most of the front-end stack outside JavaScript identifiers reads in kebab-case.
- Can I use kebab-case for JavaScript variables?
- No. The hyphen parses as a minus operator, so my-variable is read as my minus variable and will not compile. Use kebab-case for CSS classes, HTML attributes, file names and URL slugs, and switch to camelCase the moment the name has to live inside JavaScript code itself.
- Does Google treat hyphens and underscores differently in URLs?
- Yes, and it is the main reason slugs use hyphens. Google reads a hyphen as a word separator, so /user-profile/ is parsed as two words, while an underscore joins them into the single token user_profile. For anything appearing in a URL, hyphens are the safer choice. Inside code, the Snake Case Converter and Camel Case Converter cover the other two conventions.
- What happens to accented or non-English characters?
- They are folded to their closest ASCII equivalent rather than stripped, so "Café Menu Items" becomes cafe-menu-items and "Zürich Straße" becomes zurich-strasse. That is what a URL slug needs — the alternative is percent-encoded bytes that are unreadable in a shared link and awkward to type or search for.
- Is kebab-case required for npm package names?
- Effectively yes. npm names must be lowercase and URL-safe because they become part of a registry URL, which rules out spaces and capitals. Vue single-file components and most repo file names follow the same rule. Trailing punctuation is dropped rather than left as a stray separator, so "Hello World!" gives hello-world.
- Is my data private when I use this tool?
- Yes. This tool runs entirely in your browser using client-side JavaScript — nothing you type is transmitted to, logged by, or stored on any server. You can safely process confidential text, tokens, or code.