React Navbar Component Styling

Navbar Styling

Learn how to customize the React Navbar component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.

On this page

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.

scss

$navbar-tokens: defaults(
  (
    --cui-navbar-padding-x: #{if(sass($navbar-padding-x == null): 0; else: $navbar-padding-x)},
    --cui-navbar-padding-y: var(--cui-spacer-3),
    --cui-navbar-min-height: 3.5rem,
    --cui-navbar-bg: var(--cui-bg-body),
    --cui-navbar-color: color-mix(in oklch, var(--cui-emphasis-color) 65%, transparent),
    --cui-navbar-hover-color: color-mix(in oklch, var(--cui-emphasis-color) 80%, transparent),
    --cui-navbar-disabled-color: color-mix(in oklch, var(--cui-emphasis-color) 30%, transparent),
    --cui-navbar-active-color: color-mix(in oklch, var(--cui-emphasis-color) 100%, transparent),
    --cui-navbar-brand-padding-y: calc((#{$nav-link-height} - calc(#{$navbar-brand-font-size} * var(--cui-body-line-height))) * .5),
    --cui-navbar-brand-margin-end: 1rem,
    --cui-navbar-brand-font-size: #{$navbar-brand-font-size},
    --cui-navbar-brand-font-weight: var(--cui-font-weight-medium),
    --cui-navbar-brand-color: color-mix(in oklch, var(--cui-emphasis-color) 100%, transparent),
    --cui-navbar-brand-hover-color: color-mix(in oklch, var(--cui-emphasis-color) 100%, transparent),
    --cui-navbar-nav-link-padding-x: .5rem,
    --cui-navbar-text-padding-y: #{$nav-link-padding-y},
    --cui-navbar-toggler-padding-y: .25rem,
    --cui-navbar-toggler-padding-x: .75rem,
    --cui-navbar-toggler-font-size: var(--cui-font-size-lg),
    --cui-navbar-toggler-icon-size: 1.5em,
    --cui-navbar-toggler-icon-bg: #{escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='black' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>"))},
    --cui-navbar-toggler-border-color: color-mix(in oklch, var(--cui-emphasis-color) 15%, transparent),
    --cui-navbar-toggler-border-radius: var(--cui-radius-5),
    --cui-navbar-toggler-focus-width: var(--cui-focus-ring-width),
    --cui-navbar-toggler-transition: box-shadow .15s ease-in-out,
  ),
  $navbar-tokens
);

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

scss

$navbar-nav-tokens: defaults(
  map.merge(
    $nav-tokens,
    (
      --cui-nav-gap: var(--cui-spacer-1),
      --cui-nav-link-padding-x: 0,
      --cui-nav-link-justify: flex-start,
      --cui-nav-link-color: var(--cui-navbar-color),
      --cui-nav-link-hover-color: var(--cui-navbar-hover-color),
      --cui-nav-link-hover-bg: transparent,
      --cui-nav-link-active-color: var(--cui-navbar-active-color),
      --cui-nav-link-active-bg: transparent,
      --cui-nav-link-disabled-color: var(--cui-navbar-disabled-color),
    )
  ),
  $navbar-nav-tokens
);

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

scss

$navbar-dark-tokens: defaults(
  (
    --cui-navbar-color: color-mix(in oklch, var(--cui-white) 55%, transparent),
    --cui-navbar-hover-color: color-mix(in oklch, var(--cui-white) 75%, transparent),
    --cui-navbar-disabled-color: color-mix(in oklch, var(--cui-white) 25%, transparent),
    --cui-navbar-active-color: var(--cui-white),
    --cui-navbar-brand-color: var(--cui-white),
    --cui-navbar-brand-hover-color: var(--cui-white),
    --cui-navbar-toggler-border-color: color-mix(in oklch, var(--cui-white) 10%, transparent),
  ),
  $navbar-dark-tokens
);

How to use CSS variables

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

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

Sass variables

Deprecated in v6.0.0

Sass variables set these defaults at build time and are removed in v7. The CSS variables above reach the same values without recompiling, and can be set on a single element.

Variables for all navbars:

scss

$navbar-padding-x:                  null !default;

$navbar-brand-font-size:            var(--cui-font-size-lg) !default;
// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
$nav-link-height:                   calc(var(--cui-body-font-size) * var(--cui-body-line-height) + #{$nav-link-padding-y} * 2) !default;

Sass loops

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

scss

// Generate series of `.navbar-expand-*` responsive classes for configuring
// where your navbar collapses.
.navbar-expand {
  @each $breakpoint in map.keys($breakpoints) {
    $next: breakpoint-next($breakpoint, $breakpoints);
    $infix: breakpoint-infix($next, $breakpoints);

    // stylelint-disable-next-line scss/selector-no-union-class-name
    &#{$infix} {
      @include container-breakpoint-up($next) {
        @include navbar-expanded-container() {
          flex-wrap: nowrap;
          justify-content: flex-start;
        }

        .navbar-nav {
          flex-direction: row;

          .dropdown-menu {
            position: absolute;
          }

          .nav-link {
            padding-inline: var(--cui-navbar-nav-link-padding-x);
          }
        }

        .navbar-nav-scroll {
          overflow: visible;
        }

        .navbar-collapse {
          display: flex !important; // stylelint-disable-line declaration-no-important
          flex-basis: auto;
        }

        .navbar-toggler {
          display: none;
        }

        .offcanvas,
        .drawer {
          // stylelint-disable declaration-no-important
          position: static;
          z-index: auto;
          flex-grow: 1;
          width: auto !important;
          height: auto !important;
          visibility: visible !important;
          background-color: transparent !important;
          border: 0 !important;
          transform: none !important;
          @include box-shadow(none);
          @include transition(none);
          // stylelint-enable declaration-no-important

          .offcanvas-header,
          .drawer-header {
            display: none;
          }

          .offcanvas-body,
          .drawer-body {
            display: flex;
            flex-grow: 0;
            padding: 0;
            overflow-y: visible;
          }
        }
      }
    }
  }
}