By the end of this tutorial, you’ll confidently use Lodash’s _.kebabCase() method in real JavaScript projects.
Call _.kebabCase(string) for hyphenated output.
Turn titles into SEO-friendly paths.
Generate consistent class name tokens.
Compare with _.camelCase() and _.snakeCase().
Symbols become word separators.
Slugify once, store the result.
_.kebabCase()?It converts a string to kebab-case: lowercase words separated by hyphens, such as "fooBar" becoming "foo-bar".
Import only what you need: import kebabCase from "lodash/kebabCase" keeps bundles small.
_.kebabCase([string=''])import kebabCase from "lodash/kebabCase";
const title = "Hello World!";
const slug = kebabCase(title);
console.log(slug);
// -> "hello-world"| Task | Code pattern | Result |
|---|---|---|
| Basic convert | _.kebabCase('Hello World') | hello-world |
| From camelCase | _.kebabCase('fooBar') | foo-bar |
| URL slug | '/posts/' + _.kebabCase(title) | Path segment |
| CSS class | _.kebabCase(componentName) | header-component |
| From CONSTANT | _.kebabCase('API_KEY') | api-key |
| Opposite style | _.camelCase(str) | camelCase output |
NoReturns new string
Hyphen -kebab-case
LowercaseAll words lower
_.snakeCase()Underscore variant
Every argument to _.kebabCase() and what it controls:
stringOptionalThe string to convert. When omitted or empty, returns an empty string.
_.kebabCase('Hello World')return valueNew stringA hyphenated lowercase string built from the input words. The original string is unchanged.
// -> 'hello-world'separatorsImplicitSpaces, hyphens, underscores, punctuation, and case changes all define word boundaries before joining.
_.kebabCase('foo_bar-baz')edge casesImportantPunctuation is stripped, not preserved. Test acronyms like XMLHttp and Unicode text for your locale.
_.kebabCase('Привет Мир')For JavaScript identifiers, use _.camelCase(). For database columns, prefer _.snakeCase().
Practical _.kebabCase() patterns with copy-ready code and interactive Try It Yourself labs.
Convert plain phrases and camelCase strings to kebab-case.
Turn a simple greeting with spaces into kebab-case.
const input = "Hello World!";
const result = _.kebabCase(input);
console.log(result);
// -> "hello-world"Spaces become hyphens and all letters are lowercased.
Build URL paths, CSS classes, and API keys from mixed-case input.
Convert a JavaScript-style identifier into a hyphenated slug.
const component = "HeaderComponent";
const className = _.kebabCase(component);
console.log(className);
// -> "header-component"Lodash detects the capital C boundary between "Header" and "Component".
Generate an article path from a long title string.
const pageTitle = "Lodash _.kebabCase() String Method Explained";
const pageURL = "/articles/" + _.kebabCase(pageTitle);
console.log(pageURL);
// -> "/articles/lodash-kebab-case-string-method-explained"Punctuation is stripped and words are hyphenated for clean URL segments.
Commas and exclamation marks are treated as word boundaries.
const input = "Hello, World!";
const result = _.kebabCase(input);
console.log(result);
// -> "hello-world"Special characters do not appear in the output; they separate words instead.
Constants, Unicode text, and comparison with other case helpers.
Convert an uppercase constant name to kebab-case.
const apiKey = "API_KEY";
const formatted = _.kebabCase(apiKey);
console.log(formatted);
// -> "api-key"Underscores and capitals both signal word boundaries.
See kebab-case alongside snake_case and camelCase for the same input.
import kebabCase from "lodash/kebabCase";
import snakeCase from "lodash/snakeCase";
import camelCase from "lodash/camelCase";
const input = "Foo Bar";
console.log(kebabCase(input)); // -> "foo-bar"
console.log(snakeCase(input)); // -> "foo_bar"
console.log(camelCase(input)); // -> "fooBar"
// camelCase input splits on case boundaries:
console.log(kebabCase("fooBarBaz")); // -> "foo-bar-baz"Pick the case style that matches your URL, CSS, or JavaScript naming convention.
_.kebabCase() WorksLodash normalizes the string (empty string if null/undefined).
Spaces, punctuation, and case changes define word boundaries.
Every word segment is converted to lowercase.
Words are joined with - to produce kebab-case output.
_.kebabCase() returns a new string; the original is unchanged._.kebabCase() is the go-to Lodash helper when you need hyphenated, lowercase tokens for URLs, CSS classes, and HTML attributes. Use it on page titles, component names, and config labels.
When you need JavaScript identifiers or database column names, reach for _.camelCase() or _.snakeCase() instead.
_.kebabCase()Words with -.
BasicsLowercase output.
FormatSEO-friendly paths.
PatternCase and symbols split.
RulesUnderscore variant.
Related_.kebabCase() shares the same word-splitting rules as _.camelCase() and _.snakeCase()—only the join style differs. For display titles (not URL slugs), use _.startCase() instead.
Open the Try It editor and run the examples with your own input.
6 people found this page helpful