Kebab Case Converter — Transform Text to kebab-case Instantly
This kebab-case converter and URL slug generator turns any title, phrase, or camelCase identifier into a hyphenated, all-lowercase string: "My Blog Post" becomes "my-blog-post" in one click. Google's John Mueller confirmed that hyphens in URLs are treated as word separators by Google's crawler — making kebab-case the SEO-recommended format for URL slugs. CSS property names are kebab-case by W3C specification (background-color, font-size, border-radius), and custom CSS properties (CSS variables) follow the same pattern: --primary-color, --font-heading. The npm registry requires all package names to be lowercase and uses kebab-case throughout: react-router, @tanstack/react-query, vue-router. HTML custom data attributes and ARIA attributes are always kebab-case — data-user-id, data-track-event, aria-label. Next.js, Nuxt, Astro, and Hugo all recommend kebab-case for page file names and route paths. No signup, no character limit.
What is kebab-case?
The kebab-case converter lowercases every letter and joins words with hyphens — "User Profile" becomes "user-profile" instantly. Google explicitly recommends hyphens over underscores in URLs, making kebab-case the right format for URL slugs, CSS class names, and HTML data attributes. Never use kebab-case in code variables — hyphens are subtraction operators in every language.
hello world example→hello-world-exampleKey Features
URL Slug Generator — SEO-Ready Output
Convert article titles, product names, and page headings into Google-recommended hyphen-separated URL slugs. "My Blog Post Title" → "my-blog-post-title" — keyword-clear and crawler-friendly.
Accepts camelCase, PascalCase & Spaces
Paste "userProfileCard", "UserProfileCard", or "user profile card" — all produce "user-profile-card". Word boundaries in camelCase and PascalCase are split automatically.
Safe for Unreleased Product Names and Pre-Launch Route Structures
Your page titles, CSS class names, and route paths never leave your device. Nothing is transmitted to any server — safe for unreleased product names and internal route structures.
npm Registry Compliant — Lowercase Hyphenated Output
npm package names must be lowercase and cannot contain uppercase letters or spaces. Output from this converter is npm-registry-ready for package.json name fields — matching the naming convention of react-router, @tanstack/react-query, and every major npm package.
Before & After: kebab-case Examples
Real input → output pairs showing exactly how the converter behaves
| Input | kebab-case Output |
|---|---|
Hello World | hello-world |
My Blog Post | my-blog-post |
User Profile Card | user-profile-card |
Primary Navigation Item | primary-navigation-item |
Boho Neutral Wall Art Set of 6 | boho-neutral-wall-art-set-of-6 |
When to Use kebab-case
Use kebab-case for URL slugs (/blog/my-first-post), CSS classes (.nav-link, .hero-section), HTML data attributes (data-user-id), file names (my-component.tsx), and NPM package names (@my-org/my-package).
Never use kebab-case in JavaScript or Python variable/function names — hyphens are subtraction operators and will cause syntax errors. Do not use it for database columns (use snake_case instead).
kebab-case vs Other Formats
| Format | Example | Best For |
|---|---|---|
| kebab-case | my-blog-post | URL slugs, CSS class names, CSS custom properties, npm package names, HTML data-* attributes, ARIA attributes, Next.js/Astro file names |
| snake_case | my_blog_post | Python variables/functions, SQL column names, database schemas, Rust identifiers, Linux file names |
| camelCase | myBlogPost | JavaScript/TypeScript variables, function names, JSON keys, React props, object properties |
| PascalCase | MyBlogPost | React component names, TypeScript classes/interfaces, Java/C# class names, Go exported types |
Who Should Use This Tool?
Convert page titles and article headings into SEO-friendly URL slugs — kebab-case is the Google-recommended format for hyphen-separated, readable URLs that Google treats as individual keywords.
Generate consistent CSS class names, BEM modifiers, CSS custom property names, and HTML data-* attribute names in kebab-case — the universal convention in CSS and HTML.
Create file names and route slugs for WordPress, Ghost, Hugo, Jekyll, Gatsby, or Next.js pages that follow kebab-case naming expected by these frameworks and CMS platforms.
Industry Standard
The W3C recommends hyphen-separated lowercase for HTML attribute names and CSS property names (e.g., background-color, font-size, data-user-id). Google's SEO guidelines also recommend hyphen-separated URL slugs over underscores, as hyphens are treated as word separators by Google's crawler while underscores are not.
kebab-case Rules: How It Works
- →All letters converted to lowercase
- →Spaces, underscores, and camelCase boundaries replaced with hyphens — "my blog post" → "my-blog-post"
- →Punctuation and special characters stripped
- →Numbers kept in place — "section 2 intro" → "section-2-intro"
- ×JavaScript/Python identifiers — hyphens parse as the minus operator (ReferenceError)
- ×Database column names — use snake_case (first_name, not first-name)
- ×Constants — use CONSTANT_CASE (MY_CONST, not my-const)
- ×Class or component names — use PascalCase (MyComponent)
How to Use This kebab-case Converter
- Paste or type your text into the Input Text box on the left.
- The output is converted to kebab-case instantly on the right.
- Click Copy to copy the result to your clipboard.
- Use Clear to reset and convert new text.
Key Use Cases
- →Generate SEO-optimized URL slugs from article titles, landing page headings, and product names for WordPress, Ghost, Webflow, or any custom CMS. Google's John Mueller confirmed hyphens are treated as word separators — "how-to-learn-python" gives Google three clear keyword signals versus the ambiguous "howtoLearnPython" or "how_to_learn_python".
- →Produce CSS class names and BEM modifier names from component design descriptions. CSS property names are defined in kebab-case by the W3C CSS specification (background-color, flex-direction, border-radius), and CSS custom properties follow the same pattern: --primary-color, --spacing-md. Bootstrap, Tailwind, and BEM all use kebab-case for class names and modifiers.
- →Create npm package names from project or library descriptions. The npm registry enforces lowercase and strongly favors kebab-case: react-router, @tanstack/react-query, vue-router, next-auth, prisma-client. Package names cannot contain uppercase letters per npm registry rules.
- →Format HTML custom data attributes and ARIA attributes. HTML spec and ARIA spec both require kebab-case: data-user-id, data-track-event, data-product-category, aria-label, aria-describedby, aria-expanded. Camel-case data attributes (data-userId) are technically invalid — they will be accessible in JS only as dataset.userId (the browser silently converts), but in HTML the attribute must be lowercase-hyphenated.
- →Build file names and route paths for Next.js, Nuxt, Astro, Hugo, and Jekyll static sites. Next.js App Router expects kebab-case directory names for routes (/user-profile/settings). Astro and Hugo recommend kebab-case for content files (my-blog-post.md). React Router and Vue Router route paths follow kebab-case by convention (/product-detail/:id).
kebab-case in Programming Languages
.nav-link { color: blue; }<div class="hero-section" data-user-id="1"><my-component :user-name='name' />npm install my-package-name/blog/how-to-use-kebab-caseThis Converter vs Manual Methods
| Method | Limitation |
|---|---|
| Manual typing in the editor or CMS | Prone to missing a hyphen, forgetting to lowercase, or leaving spaces — invalid URL slugs cause 404s or redirect chains |
| WordPress/Ghost auto-slug from title | Auto-generated slugs include stop words (a, the, of) and may not be keyword-optimized; editing after publish creates redirect debt |
| JavaScript toLowerCase().replace(/ /g, "-") | Only handles spaces; fails on apostrophes, camelCase input, special characters, and accented letters |
| Regex slugify in Python or Node.js | Requires regex expertise; handling accented characters (café → cafe), emoji, and camelCase splitting needs multiple passes |
| This converter | None — free, instant, browser-based, strips special characters and handles all input formats |
Common Mistakes & Pro Tips
- !Using kebab-case for JavaScript or Python variable names — hyphens are parsed as the arithmetic minus operator in JS and Python. Writing "my-variable" in JavaScript throws a ReferenceError because the engine reads it as "my" minus "variable". In Python it is a SyntaxError. Always use camelCase for JS/TS identifiers and snake_case for Python — kebab-case is strictly for CSS, HTML, URLs, and npm packages.
- !Using snake_case (underscores) instead of hyphens in URL slugs — Google's John Mueller has confirmed multiple times that hyphens in URLs are treated as word separators, improving keyword clarity for crawlers. Underscores in URL paths are not treated as separators by default, so "my_blog_post" may be indexed as the compound token "myblogpost" rather than three separate keywords. If you switch an existing URL from underscores to hyphens, set up a 301 redirect to preserve link equity.
- !Skipping kebab-case for HTML data attributes and ARIA roles — HTML5 data-* attribute names and all ARIA attribute names must be lowercase with hyphens. Writing data-userId in your HTML is technically invalid (it is parsed as data-userid by the browser), and aria-labelledby, aria-expanded, and aria-describedby are defined by the ARIA spec in kebab-case — these are not stylistic choices.
Frequently Asked Questions
Everything you need to know about kebab-case
Why does Google recommend hyphens over underscores in URLs?
+
Google's John Mueller has confirmed in multiple webmaster Q&A sessions that Google treats hyphens as word separators in URL paths — /my-blog-post signals three keywords: "my", "blog", "post". Underscores are not treated as separators by default, so /my_blog_post may be indexed as a single compound token "myblogpost" rather than three distinct words. For maximum keyword clarity and SEO benefit, use kebab-case hyphens in all URL slugs. This is specifically about URL paths — the difference is minor for most well-established pages, but matters most on new content where Google is still assessing relevance.
What is the difference between kebab-case and snake_case?
+
Both are all-lowercase formats that separate words with a single character. Kebab-case uses hyphens: "my-blog-post". Snake_case uses underscores: "my_blog_post". The key distinction is context: hyphens are valid in CSS class names, HTML attributes, URL slugs, and npm package names — but are the minus operator in JavaScript, Python, Ruby, and most other programming language identifier contexts. Underscores are valid identifiers in virtually every language but produce worse SEO outcomes in URL slugs. Use kebab-case for the web layer (URLs, CSS, HTML); use snake_case for code and databases.
Does CSS use kebab-case for all properties and class names?
+
CSS property names are defined as kebab-case in the W3C CSS specification — background-color, font-size, border-radius, flex-direction — and this is fixed. CSS custom properties (CSS variables) also use kebab-case by strong convention: --primary-color, --font-heading, --spacing-lg. Class names are not specified by CSS itself, but the entire CSS ecosystem uses kebab-case: Bootstrap (btn-primary, text-muted), Tailwind (text-lg, bg-blue-500), and BEM (block__element--modifier). Tailwind uses kebab-case even for its utility class prefixes (hover:, focus:, dark:).
How does kebab-case work for npm package names?
+
The npm registry enforces lowercase for all package names and uses kebab-case as the dominant convention. Package names cannot contain uppercase letters — "MyPackage" is invalid. Nearly all major npm packages follow kebab-case: react-router, vue-router, next-auth, @tanstack/react-query, express-validator, jest-dom. Scoped packages (@org/package-name) follow the same kebab-case rule for both the scope and the package name. If you are naming a new library or CLI tool, convert its descriptive name to kebab-case for the package name.
Can I use this to create slugs for Shopify, Etsy, or WooCommerce product URLs?
+
Yes. Shopify calls these "URL handles" and generates them from product titles — but you can manually override them. Etsy and WooCommerce have similar slug fields. Paste your product title into this converter, click Convert, and use the kebab-case result as your URL handle. "Boho Neutral Wall Art Set of 6" becomes "boho-neutral-wall-art-set-of-6" — a clean, keyword-rich slug that is both SEO-friendly and readable. Avoid changing slugs on live products with backlinks unless you set up 301 redirects.
How are file names and routes treated in Next.js, Astro, and Hugo?
+
Next.js App Router uses the directory name as the URL path — /app/user-profile/page.tsx maps to /user-profile. Kebab-case directory names are the convention and recommendation. Astro uses the file name as the route: src/pages/my-blog-post.astro → /my-blog-post. Hugo content files use kebab-case: content/posts/how-to-learn-python.md → /posts/how-to-learn-python/. Next.js Pages Router also recommends kebab-case for multi-word page files (pages/user-profile.tsx). Consistent kebab-case avoids case-sensitivity issues on Linux production servers (where "UserProfile.tsx" and "userprofile.tsx" are different files).
How do I convert a title to a URL slug in WordPress, Python, or JavaScript?
+
WordPress auto-generates slugs from post titles but strips stop words inconsistently — you can manually edit the slug in the post editor's "Permalink" section. In Python, a simple slugify is: import re; slug = re.sub(r"[^\w\s-]", "", title.lower()); slug = re.sub(r"[\s_]+", "-", slug). For production use, the python-slugify library handles accented characters (café → cafe) and edge cases. In JavaScript/Node.js, the slugify npm package is standard. For a quick one-off conversion of any source text, this browser converter handles camelCase, PascalCase, spaces, and special characters in a single step.