---
title: React Breadcrumb Component Styling
name: Breadcrumb Styling
description: Learn how to customize the React Breadcrumb component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.
route: /components/breadcrumb/
---

### CSS variables

React Breadcrumb supports CSS variables for easy customization. These variables are set via SASS but allow direct overrides in your stylesheets or inline styles.

<ScssDocs file="_breadcrumb.scss" capture="breadcrumb-css-vars" />

#### How to use CSS variables

```jsx
const customVars = {
  '--cui-breadcrumb-bg': '#eee',
  '--cui-breadcrumb-divider-color': '#a2a3a4',
}

return <CBreadcrumb style={customVars} />
```

### SASS variables

<ScssDocs file="_variables.scss" capture="breadcrumb-variables" />
