Free kebab-case Converter — Instant URL & CSS Slug Generator
Convert any text to kebab-case instantly with our free online tool. The standard format for URL slugs, CSS class names, HTML data attributes, Vue.js components, and npm package names. All lowercase with hyphens — perfect for SEO-friendly URLs and clean CSS.
What is kebab-case?
kebab-case is a naming convention where all letters are lowercase and words are separated by hyphens (-). The name comes from the way words are 'skewered' together like meat on a kebab stick. It is the standard for URLs, CSS class names, HTML attributes, and many configuration files.
Example:
Input:
user profile page
Output:
user-profile-page
When Do Developers Use kebab-case?
| Language / Context | Usage | Example |
|---|---|---|
| URLs & slugs | Blog posts, page routes | my-blog-post-title |
| CSS class names | Styling components | btn-primary, nav-bar, hero-section |
| HTML attributes | Data attributes | data-user-id, data-post-slug |
| Vue.js components | Component names | <user-profile />, <nav-bar /> |
| npm packages | Package names | my-awesome-package |
| Configuration files | Project config files | babel-config.js, jest-setup.js |
kebab-case Examples — Right vs Wrong
| Input Text | ✅ Correct | ❌ Wrong Format |
|---|---|---|
| my blog post | my-blog-post | myBlogPost / my_blog_post |
| primary button | primary-button | primaryButton / primary_button |
| user profile page | user-profile-page | userProfilePage / user_profile_page |
| getting started guide | getting-started-guide | gettingStartedGuide |
| output file name | output-file-name | outputFileName / output_file_name |
Ready to convert your text? Use the tool at the top of this page — it's free, instant, and requires no signup.
Frequently Asked Questions
What is kebab-case?
kebab-case is a naming convention where all letters are lowercase and words are separated by hyphens. Example: my-blog-post, user-profile. It is named after the skewered appearance of the hyphens.
Why is kebab-case used for URLs?
Hyphens in URLs are recognised by search engines as word separators, which helps SEO. Google's John Mueller has confirmed that hyphens in URLs are preferred over underscores for separating words in web addresses.
What is the difference between kebab-case and snake_case?
Both use all lowercase letters, but kebab-case uses hyphens (user-name) while snake_case uses underscores (user_name). Use kebab-case for URLs and CSS; use snake_case for Python and databases.
Can kebab-case be used in JavaScript?
Not for variable names — hyphens are not valid in JavaScript identifiers. However, kebab-case is used in Vue.js template component names and HTML data attributes.
s kebab-case good for SEO?
Yes — kebab-case is the recommended URL format for SEO. Words separated by hyphens in a URL slug help search engines understand the page content. Example: /best-case-converter-tools ranks better than /bestcaseconvertertools.
How do I convert text to kebab-case?
Paste your text into the converter above and click 'kebab-case'. All letters are lowercased and spaces are replaced with hyphens instantly.