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

### CSS variables

React navbars use local CSS variables on `.navbar` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.

<ScssDocs file="_navbar.scss" capture="navbar-css-vars"/>

Some additional CSS variables are also present on `.navbar-nav`:

<ScssDocs file="_navbar.scss" capture="navbar-nav-css-vars"/>

Customization through CSS variables can be seen on the `.navbar-dark` class where we override specific values without adding duplicate CSS selectors.

<ScssDocs file="_navbar.scss" capture="navbar-dark-css-vars"/>

#### How to use CSS variables

```jsx
const customVars = {
  '--cui-navbar-color': '#24e484',
  '--cui-navbar-hover-color': '1a1a1a',
}

return <CNavbar style={customVars}>{/* Navbar content */}</CNavbar>
```

### SASS variables

Variables for all navbars:

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

Variables for the [dark navbar](#color-schemes):

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

### SASS loops

[Responsive navbar expand/collapse classes](#responsive-behaviors) (e.g., `.navbar-expand-lg`) are combined with the `$breakpoints` map and generated through a loop in `scss/_navbar.scss`.

<ScssDocs file="_navbar.scss" capture="navbar-expand-loop"/>
