What Is Kebab Case?
Kebab case (written as kebab-case) is a naming convention where all letters are lowercase and each word is separated by a hyphen. The name comes from the visual appearance—the hyphens look like skewers running through pieces of meat on a kebab. For example, "main navigation menu" becomes main-navigation-menu when converted to kebab case.
This convention is the undisputed standard across the entire web development stack for anything that appears in the browser. CSS class names use kebab-case exclusively—every major framework from Bootstrap to Tailwind CSS follows this convention. URL paths (often called slugs) use kebab-case because search engines prefer hyphens over underscores for word separation. HTML data attributes, SVG element IDs, and web file names all follow the same pattern.
The reason kebab-case won out over snake_case in web contexts is practical: hyphens are easier to type than underscores (no Shift key needed), they're more readable in URLs (underscores can be hidden by link underlines), and they're the standard separator in CSS syntax itself. When you write font-size: 16px;, you're already using kebab-case—the language itself uses it for property names, so it's natural to extend the convention to your own identifiers.
Seven Case Styles at a Glance
- kebab-case: All lowercase with hyphen separators. The default output. Used for CSS classes, URL slugs, HTML attributes, and web file names. Example:
main-navigation-menu - snake_case: All lowercase with underscores. The Python and SQL standard. Example:
main_navigation_menu - camelCase: First word lowercase, rest capitalized. JavaScript and Java conventions. Example:
mainNavigationMenu - PascalCase: Every word capitalized. Used for C# classes, React components. Example:
MainNavigationMenu - SCREAMING_SNAKE_CASE: All uppercase with underscores. Reserved for constants. Example:
MAIN_NAVIGATION_MENU - dot.notation: Lowercase with periods. Used in configuration files and namespaces. Example:
main.navigation.menu - flatcase: All lowercase with no separators. Used for some package names. Example:
mainnavigationmenu
How the Kebab Case Converter Works
When you paste text into this tool, the intelligent detection system analyzes your input to understand its current format. Whether your text uses spaces, camelCase, snake_case, PascalCase, or a mix of formats, the converter identifies each individual word and reassembles them with hyphens in between. The result is always clean, lowercase, and URL-safe.
The conversion process strips out any special characters that shouldn't appear in web identifiers, removes extra spaces, and ensures there are no leading or trailing hyphens. If you have uppercase letters in your input, they're automatically converted to lowercase unless you disable the force lowercase option. This makes the tool perfect for generating URL slugs from article titles, converting programming identifiers between conventions, or creating consistent CSS class names from design documentation.
Kebab Case in CSS and URLs
In the world of web development, kebab-case isn't just a preference—it's the expected standard. CSS property names themselves use kebab-case (background-color, border-radius, font-family), so using the same convention for your own class names creates visual consistency throughout your stylesheets. Every major CSS framework, from Bootstrap to Tailwind to Bulma, follows this convention.
For URLs and SEO, kebab-case provides a measurable advantage. Google's own documentation confirms that search engines interpret hyphens as word separators in URLs, making /blog/how-to-convert-text more readable to both users and crawlers than /blog/how_to_convert_text or /blog/howtoconverttext. This is why content management systems like WordPress automatically convert post titles to kebab-case slugs. Our Snake Case Converter is the complementary tool when you need to work with identifiers on the backend rather than the frontend.
Who Uses a Kebab Case Converter?
- Frontend developers: Generate CSS class names, HTML data attributes, and component identifiers following web standards.
- Content managers: Create SEO-friendly URL slugs from article titles and page headings.
- Web designers: Convert design handoff text into development-ready class names and file names.
- Full-stack developers: Switch between kebab-case (frontend), snake_case (Python backend), and camelCase (JavaScript logic) as needed.
- Technical writers: Create clean, readable file names for web-hosted documentation and assets.
- DevOps engineers: Generate consistent naming for configuration files and deployment scripts.
Key Features
- Seven output formats: kebab-case, snake_case, camelCase, PascalCase, SCREAMING_SNAKE, dot.notation, and flatcase.
- URL slug preview: See exactly how your text will appear as a web-friendly URL path.
- Intelligent input detection: Automatically parses any case format, spaces, or mixed input.
- Side-by-side comparison: See how your text looks in all seven formats simultaneously.
- Force lowercase option: Ensure all output meets web standards for URLs and CSS.
- Quick sample presets: CSS classes, URL slugs, HTML data attributes, BEM naming, and Tailwind examples.
- Built-in reference guides: Visual charts showing where and how to use kebab-case in real projects.
- 100% private: All conversion happens in your browser.
- Completely free: No signup, no limits, no watermarks.
Conversion Examples
Here's how the same phrase transforms across all seven case styles:
Input: "Main Navigation Menu Container With Dropdown Items"
- kebab-case:
main-navigation-menu-container-with-dropdown-items - snake_case:
main_navigation_menu_container_with_dropdown_items - camelCase:
mainNavigationMenuContainerWithDropdownItems - PascalCase:
MainNavigationMenuContainerWithDropdownItems - SCREAMING_SNAKE:
MAIN_NAVIGATION_MENU_CONTAINER_WITH_DROPDOWN_ITEMS - dot.notation:
main.navigation.menu.container.with.dropdown.items - flatcase:
mainnavigationmenucontainerwithdropdownitems
BEM Naming with Kebab Case
BEM (Block Element Modifier) is a popular CSS naming methodology that uses kebab-case as its foundation. In BEM, you combine hyphens and underscores to create a structured naming system: blocks use plain kebab-case (search-form), elements use double underscores (search-form__input), and modifiers use double hyphens (search-form__input--disabled).
This tool handles BEM naming perfectly—the auto-detection recognizes the double underscore and double hyphen patterns and preserves the correct word boundaries. You can convert a BEM class name to camelCase for JavaScript DOM manipulation (searchFormInput) or to snake_case for your backend templates, and the structure is maintained. Our Uppercase Converter pairs well when you need to generate SCREAMING_SNAKE constants for your BEM modifier values in JavaScript.