Text to kebab-case

Convert Text to Kebab Case Online

Transform any text into kebab-case format instantly with our free online kebab case converter. Whether you are creating CSS class names, building URL slugs, or defining HTML data attributes, converting text to kebabcase is a common task in front-end development. This tool handles hyphen case conversion automatically, letting you focus on building rather than manually reformatting strings with hyphens between each word.

What is Kebab Case

Kebab case is a naming convention where words are written in lowercase and separated by hyphens. The name comes from the visual similarity to a kebab skewer piercing through pieces of food, with the hyphens acting as the skewer between words. For example, the phrase "main navigation bar" becomes "main-navigation-bar" in kebab-case format. This convention is also commonly referred to as hyphen case, dash case, or lisp-case, reflecting its widespread use across different technology domains.

The kebab case convention is deeply rooted in web development. CSS has used hyphenated property names since its inception, with names like "background-color", "font-size", and "border-radius" all following the kebab-case pattern. This established convention naturally extended to CSS class names, custom properties, and component naming in many front-end frameworks. Beyond CSS, kebab-case is the standard format for URL path segments, making it essential for SEO-friendly web addresses and clean permalink structures.

Unlike snake case with underscores, which is dominant in backend languages like Python and Ruby, kebab-case is primarily a front-end and web-facing convention. The hyphen character is URL-safe without encoding, making kebab-case ideal for web addresses. Search engines treat hyphens as word separators, which means kebab-case URLs are inherently more SEO-friendly than URLs using underscores or concatenated words.

How the Conversion Works

Our kebab case converter processes your input text by identifying word boundaries and reconstructing the text with hyphens between each lowercase word. The tool accepts a wide range of input formats including plain sentences, camelCase, PascalCase, snake_case, and mixed formats. It intelligently detects where one word ends and another begins by analyzing capitalization patterns, existing delimiters, spaces, and special characters.

The conversion algorithm first normalizes the input by identifying all word boundaries. For camelCase input like "backgroundColor", it detects the transition from lowercase to uppercase as a word boundary. For snake_case input like "background_color", it treats the underscore as a delimiter. After splitting the text into individual words, each word is converted to lowercase and joined with hyphens. The result is clean, properly formatted kebab-case output ready for use in your stylesheets, URLs, or markup.

If you need to convert text in the opposite direction, from kebab-case to a format suitable for JavaScript variables, our text to camelCase converter handles that transformation seamlessly. For class names in object-oriented languages, the PascalCase conversion tool provides the appropriate formatting with each word capitalized.

Syntax Comparison

Seeing the same identifier expressed in different naming conventions clarifies when kebab-case is the right choice. Here is a side-by-side comparison:

Convention	Example	Primary Domain
kebab-case	main-content-wrapper	CSS classes, URLs, HTML attributes
camelCase	mainContentWrapper	JavaScript variables, JSON keys
PascalCase	MainContentWrapper	React components, C# classes
snake_case	main_content_wrapper	Python variables, database columns
SCREAMING_SNAKE_CASE	MAIN_CONTENT_WRAPPER	Constants, environment variables

Kebab-case is unique among these conventions because it uses a character (the hyphen) that is not valid in variable names in most programming languages. This means kebab-case identifiers cannot be used directly as variable names in JavaScript, Python, or most other languages without bracket notation or quoting. This limitation is precisely why kebab-case is reserved for contexts where variable name restrictions do not apply, such as CSS, HTML attributes, and URLs.

Common Use Cases

Kebab case appears throughout web development and beyond. Here are the most important contexts where hyphen case formatting is expected or preferred:

CSS Class Names: The BEM methodology and most CSS naming conventions use kebab-case for class names. Names like "nav-bar", "card-header", and "btn-primary" follow this pattern. CSS frameworks such as Bootstrap, Tailwind CSS, and Bulma all use kebab-case extensively. Writing clean, consistent CSS class names in kebab-case improves stylesheet readability and maintainability.

URL Slugs and Paths: Search engines recommend using hyphens to separate words in URLs. A URL like "/blog/getting-started-with-react" is more readable and SEO-friendly than alternatives using underscores or concatenated words. Content management systems like WordPress automatically generate kebab-case slugs from post titles, and most web frameworks provide slug generation utilities that produce kebab-case output.

HTML Custom Data Attributes: HTML5 data attributes follow the kebab-case convention. Attributes like "data-user-id", "data-toggle-state", and "data-animation-delay" use hyphens as separators. When accessed via JavaScript's dataset API, these kebab-case attribute names are automatically converted to camelCase, creating a natural bridge between HTML and JavaScript naming conventions.

Web Component Names: The HTML custom elements specification requires that custom element names contain at least one hyphen. Names like "my-component", "app-header", and "user-profile" follow this requirement. This rule ensures custom elements are visually distinct from standard HTML elements and prevents naming conflicts with future HTML additions.

Package and Project Names: npm packages, GitHub repositories, and many open-source projects use kebab-case for their names. Packages like "react-router", "lodash-es", and "vue-cli" all follow this convention. Using kebab-case for project names ensures compatibility across different operating systems and avoids issues with case-sensitive file systems.

Configuration Keys: Many configuration formats and CLI tools use kebab-case for option names. YAML configuration files, command-line flags like "--output-dir" or "--no-cache", and CSS custom properties like "--primary-color" all use hyphenated naming. When configuration values contain special characters, our URL encoding utility can help ensure they are properly escaped for transmission.