kebab-case Converter
kebab-case joins lowercase words with hyphens: blog-post-title, user-profile-card, max-retry-count. It reads well in URLs, HTML class attributes, npm package scopes, and command-line flags. This tool turns Title Case headings, camelCase identifiers, or snake_case columns into hyphenated slugs.
Enjoying this tool?
Part of Case converters
kebab-case converter: URL slugs, CSS classes, and CLI flags
kebab-case joins lowercase words with hyphens: blog-post-title, user-profile-card, max-retry-count. It reads well in URLs, HTML class attributes, npm package scopes, and command-line flags. This tool turns Title Case headings, camelCase identifiers, or snake_case columns into hyphenated slugs.
Paste a headline, variable name, or file label and copy the slug into your CMS, router config, or stylesheet. For Python variables use snake_case; for JavaScript properties use camelCase.
How to use this converter
- Paste the phrase or identifier you want as a slug—headlines, camelCase names, and snake_case columns all work.
- Review the hyphenated output; drop stop words manually if your SEO guide prefers shorter URLs.
- Copy the slug into your CMS, route table, CSS module, or CLI documentation.
Before and after examples
Remove stop words manually if your SEO guide prefers shorter slugs.
| Original | Converted | Notes |
|---|---|---|
| Blog Post Title | blog-post-title | From Title Case |
| userProfileId | user-profile-id | From camelCase |
| user_profile_id | user-profile-id | From snake_case |
| MAX RETRY COUNT | max-retry-count | From spaced caps |
When should you use kebab-case?
Use kebab-case for public URL paths, CSS class names, HTML data attributes, many CLI flags, and npm package names. It is the web-facing spelling: readable in the address bar and safe in selectors.
Avoid kebab-case for Python variables, SQL columns, and most JavaScript identifiers—hyphens are minus operators in code. Convert at the boundary between content and engineering, not inside your application logic.
What kebab-case is (and how it differs from snake_case)
kebab-case and snake_case both use lowercase words, but hyphens versus underscores matter: URLs and CSS class names conventionally use hyphens; Python identifiers cannot contain hyphens at all. A blog slug hello-world is not valid as a Python variable name without translation.
SEO teams often prefer lowercase hyphenated URLs because they are readable and avoid case-sensitive duplicate paths. Pair this tool with the lowercase converter when legacy paths arrive in mixed case.
URL slugs, routing, and CMS fields
WordPress, static site generators, and headless CMS products expose a “slug” field—usually kebab-case. Converting a working title to a slug before publish prevents awkward percent-encoding in analytics reports.
Keep slugs short and stable. Changing /blog/my-post-title/ after launch requires redirects; generate the slug once, then edit the display title freely.
CSS classes, BEM, and design tokens
Utility-first and component CSS often uses kebab-case class names: nav-item, card-title, btn-primary. BEM modifiers extend the pattern (card__title--featured). When designers label components in Title Case, convert labels before adding them to your stylesheet.
Custom properties (CSS variables) also commonly use kebab-case: --color-brand-primary. Underscores are valid but less idiomatic in front-end style guides.
CLI flags and package names
Many CLIs accept double-hyphen flags built from kebab phrases: --max-retry-count. npm package names use kebab-case scoped packages (@org/my-package). Consistent hyphenation helps tab-completion and documentation search.
When exporting config keys from snake_case backends, run them through this converter for user-facing flag names while keeping snake_case in the database layer.
Common mistakes
Publishing a slug with uppercase letters, which can create duplicate URLs on case-sensitive servers.
Changing a live slug without a 301 redirect—bookmarks and search results will break.
Using kebab-case inside Python or JavaScript variable names where hyphens are invalid or parsed as subtraction.
Keeping every stop word in a URL when your style guide prefers shorter paths (compare blog-post-title vs blog-title).
Best practices
Generate the slug once at publish time; let the display title change without touching the path.
Lowercase paths before hyphenating when input arrives in mixed case.
Use the slugify URL generator when you also need to strip punctuation or enforce ASCII-only paths.
Document which layer uses kebab-case (URLs) versus snake_case (database) so imports do not drift.
Workflow with other Case Modify tools
A common pipeline: title case for the visible headline, kebab-case for the slug, camelCase for the JSON API field, snake_case for the analytics warehouse column. Write the mapping in your style guide so content and engineering stay aligned.
Use the slugify URL generator when you also need to strip punctuation and enforce ASCII-only paths for strict routers.
Frequently asked questions
kebab-case vs snake_case for URLs?
URLs and CSS conventionally use hyphens (kebab-case). snake_case is standard in Python code and many databases, not in browser address bars.
Should slugs include articles like “a” or “the”?
Most SEO guides drop short stop words in slugs unless they change meaning. This tool keeps every word—edit manually for your house style.
Are uppercase letters allowed in URLs?
Some servers treat /Blog and /blog as different paths. Lowercase kebab-case avoids duplicate URL variants.
How is kebab-case different from a slugify tool?
This converter focuses on word boundaries and hyphens. The slugify URL generator also strips punctuation and can enforce stricter ASCII rules for routers.
Can I use kebab-case in Python?
No. Hyphens are operators in Python. Use snake_case for variables and kebab-case only for paths, flags, or CSS outside the language.