Angular Navbar Component

Navbar

Documentation and examples for the Angular navbar - a powerful, responsive navigation header component. Includes support for branding, links, dropdowns, and more.

Available in Other JavaScript Frameworks

CoreUI Angular Navbar Component is also available for Bootstrap, React, and Vue. Explore framework-specific implementations below:

On this page

Supported content

c-navbar comes with built-in support for a handful of sub-components. Choose from the following as needed:

cNavbarBrand for your company, product, or project name.
c-navbar-nav for a full-height and lightweight navigation (including support for dropdowns).
c-navbar-toggler for use with our collapse plugin and other navigation toggling behaviors.
Flex and spacing utilities for any form controls and actions.
c-navbar-text for adding vertically centered strings of text.
cCollapse for grouping and hiding navbar contents by a parent breakpoint.

Examples

Basic usage

Here’s an example of all the sub-components included in a responsive light-themed navbar that automatically collapses at the lg (large) breakpoint.

import { Component } from '@angular/core';
import {
  ButtonDirective,
  CollapseDirective,
  ContainerComponent,
  DropdownComponent,
  DropdownItemDirective,
  DropdownMenuDirective,
  DropdownToggleDirective,
  FormControlDirective,
  FormDirective,
  NavbarBrandDirective,
  NavbarComponent,
  NavbarNavComponent,
  NavbarTogglerDirective,
  NavItemComponent,
  NavLinkDirective
} from '@coreui/angular';

@Component({
  selector: 'docs-navbar-example',
  templateUrl: './navbar-example.component.html',
  imports: [
    NavbarComponent,
    ContainerComponent,
    NavbarBrandDirective,
    NavbarTogglerDirective,
    CollapseDirective,
    NavbarNavComponent,
    NavItemComponent,
    NavLinkDirective,
    DropdownComponent,
    DropdownToggleDirective,
    DropdownMenuDirective,
    DropdownItemDirective,
    FormDirective,
    FormControlDirective,
    ButtonDirective
  ]
})
export class NavbarExampleComponent {}

<c-navbar colorScheme="light" expand="lg" class="bg-light">
  <c-container fluid>
    <a cNavbarBrand href="https://coreui.io/angular/" target="_blank">
      Navbar
    </a>
    <button [cNavbarToggler]="collapseRef"></button>
    <div #collapseRef="cCollapse" navbar cCollapse>
      <c-navbar-nav class="me-auto mb-2 mb-lg-0">
        <c-nav-item>
          <a cNavLink [active]>Home</a>
        </c-nav-item>
        <c-nav-item>
          <a cNavLink>Link</a>
        </c-nav-item>
        <c-dropdown variant="nav-item" [popper]="false">
          <a cDropdownToggle cNavLink>Dropdown</a>
          <ul cDropdownMenu>
            <li><button cDropdownItem>Action</button></li>
            <li><button cDropdownItem>Another action</button></li>
            <li><button cDropdownItem>Something else here</button></li>
          </ul>
        </c-dropdown>
        <c-nav-item>
          <a cNavLink disabled class="d-block d-lg-none d-xl-block">Disabled</a>
        </c-nav-item>
      </c-navbar-nav>
      <form cForm class="d-flex" role="search">
        <input cFormControl type="search" placeholder="Search" aria-label="Search" class="me-2">
        <button cButton color="success" variant="outline">Search</button>
      </form>
    </div>
  </c-container>
</c-navbar>

Brand

The cNavbarBrand can be applied to most elements, but an anchor works best, as some elements might require utility classes or custom styles.

import { Component } from '@angular/core';
import { ContainerComponent, NavbarBrandDirective, NavbarComponent } from '@coreui/angular';

@Component({
  selector: 'docs-navbar-brand',
  templateUrl: './navbar-brand.component.html',
  imports: [NavbarComponent, ContainerComponent, NavbarBrandDirective]
})
export class NavbarBrandComponent {}

<!--As a link-->
<c-navbar colorScheme="light" class="bg-light">
  <c-container fluid>
    <a cNavbarBrand>Navbar</a>
  </c-container>
</c-navbar>
<br/>
<!--As a heading-->
<c-navbar colorScheme="light" class="bg-light">
  <c-container fluid>
    <a cNavbarBrand class="mb-0 h1">Navbar</a>
  </c-container>
</c-navbar>

Adding cNavbarBrand to the images will likely always require custom styles or utilities to properly size. Here are some examples to demonstrate.

import { Component } from '@angular/core';
import { ContainerComponent, NavbarBrandDirective, NavbarComponent } from '@coreui/angular';

@Component({
  selector: 'docs-navbar-brand-2',
  templateUrl: './navbar-brand-2.component.html',
  imports: [NavbarComponent, ContainerComponent, NavbarBrandDirective]
})
export class NavbarBrand2Component {}

<!--Just an image-->
<c-navbar colorScheme="light" class="bg-light">
  <c-container fluid>
    <a cNavbarBrand>
      <img src="/assets/images/brand/coreui-signet.svg" alt="" width="22" height="24" />
    </a>
  </c-container>
</c-navbar>

import { Component } from '@angular/core';
import { ContainerComponent, NavbarBrandDirective, NavbarComponent } from '@coreui/angular';

@Component({
  selector: 'docs-navbar-brand-3',
  templateUrl: './navbar-brand-3.component.html',
  imports: [NavbarComponent, ContainerComponent, NavbarBrandDirective]
})
export class NavbarBrand3Component {}

<!--Image and text-->
<c-navbar colorScheme="light" class="bg-light">
  <c-container fluid>
    <a cNavbarBrand>
      <img src="/assets/images/brand/coreui-signet.svg" alt="" width="22" height="24" />
      <span class="align-middle ms-2">CoreUI</span>
    </a>
  </c-container>
</c-navbar>

Nav

c-navbar navigation is based on `c-navbar-nav. Navigation in navbars will also grow to occupy as much horizontal space as possible to keep your navbar contents securely aligned.

import { Component } from '@angular/core';
import {
  CollapseDirective,
  ContainerComponent,
  NavbarBrandDirective,
  NavbarComponent,
  NavbarNavComponent,
  NavbarTogglerDirective,
  NavItemComponent,
  NavLinkDirective
} from '@coreui/angular';

@Component({
  selector: 'docs-navbar-nav-example',
  templateUrl: './navbar-nav-example.component.html',
  imports: [
    NavbarComponent,
    ContainerComponent,
    NavbarBrandDirective,
    NavbarTogglerDirective,
    CollapseDirective,
    NavbarNavComponent,
    NavItemComponent,
    NavLinkDirective
  ]
})
export class NavbarNavExampleComponent {}

<c-navbar colorScheme="light" expand="lg" class="bg-light">
  <c-container fluid>
    <a cNavbarBrand href="https://coreui.io/angular/" target="_blank">
      Navbar
    </a>
    <button [cNavbarToggler]="collapseRef"></button>
    <div #collapseRef="cCollapse" navbar cCollapse>
      <c-navbar-nav class="me-auto mb-2 mb-lg-0">
        <c-nav-item>
          <a cNavLink [active]>Home</a>
        </c-nav-item>
        <c-nav-item>
          <a cNavLink>Features</a>
        </c-nav-item>
        <c-nav-item>
          <a cNavLink>Pricing</a>
        </c-nav-item>
        <c-nav-item>
          <a cNavLink disabled>Disabled</a>
        </c-nav-item>
      </c-navbar-nav>
    </div>
  </c-container>
</c-navbar>

You can avoid the list-based approach entirely if you prefere.

import { Component } from '@angular/core';
import { RouterLink } from '@angular/router';
import {
  CollapseDirective,
  ContainerComponent,
  NavbarBrandDirective,
  NavbarComponent,
  NavbarNavComponent,
  NavbarTogglerDirective,
  NavLinkDirective
} from '@coreui/angular';

@Component({
  selector: 'docs-navbar-nav-example-2',
  templateUrl: './navbar-nav-example-2.component.html',
  imports: [
    NavbarComponent,
    ContainerComponent,
    NavbarBrandDirective,
    NavbarTogglerDirective,
    CollapseDirective,
    NavbarNavComponent,
    NavLinkDirective,
    RouterLink
  ]
})
export class NavbarNavExample2Component {}

<c-navbar class="bg-light" colorScheme="light" expand="lg">
  <c-container fluid>
    <a cNavbarBrand href="https://coreui.io/angular/" target="_blank">
      Navbar
    </a>
    <button [cNavbarToggler]="collapseRef"></button>
    <div #collapseRef="cCollapse" cCollapse navbar>
      <c-navbar-nav class="me-auto mb-2 mb-lg-0">
        <a [active] cNavLink routerLink="./">Home</a>
        <a cNavLink routerLink="./" >Features</a>
        <a cNavLink routerLink="./">Pricing</a>
        <a cNavLink disabled routerLink="./">Disabled</a>
      </c-navbar-nav>
    </div>
  </c-container>
</c-navbar>

You can also use dropdowns in your navbar. Please note that c-dropdown component requires variant="nav-item".

import { Component } from '@angular/core';
import {
  CollapseDirective,
  ContainerComponent,
  DropdownComponent,
  DropdownItemDirective,
  DropdownMenuDirective,
  DropdownToggleDirective,
  NavbarBrandDirective,
  NavbarComponent,
  NavbarNavComponent,
  NavbarTogglerDirective,
  NavItemComponent,
  NavLinkDirective
} from '@coreui/angular';

@Component({
  selector: 'docs-navbar-nav-example-3',
  templateUrl: './navbar-nav-example-3.component.html',
  imports: [
    NavbarComponent,
    ContainerComponent,
    NavbarBrandDirective,
    NavbarTogglerDirective,
    CollapseDirective,
    NavbarNavComponent,
    NavItemComponent,
    NavLinkDirective,
    DropdownComponent,
    DropdownToggleDirective,
    DropdownMenuDirective,
    DropdownItemDirective
  ]
})
export class NavbarNavExample3Component {}

<c-navbar class="bg-light" colorScheme="light" expand="lg">
  <c-container fluid>
    <a cNavbarBrand href="https://coreui.io/angular/" target="_blank">
      Navbar
    </a>
    <button [cNavbarToggler]="collapseRef"></button>
    <div #collapseRef="cCollapse" cCollapse navbar>
      <c-navbar-nav class="me-auto mb-2 mb-lg-0">
        <c-nav-item>
          <a [active] cNavLink>Home</a>
        </c-nav-item>
        <c-nav-item>
          <a cNavLink>Features</a>
        </c-nav-item>
        <c-nav-item>
          <a cNavLink>Pricing</a>
        </c-nav-item>
        <c-dropdown [popper]="false" variant="nav-item">
          <a cDropdownToggle cNavLink>Dropdown</a>
          <div cDropdownMenu>
            <button cDropdownItem>Action</button>
            <button cDropdownItem>Another action</button>
            <button cDropdownItem>Something else here</button>
          </div>
        </c-dropdown>
      </c-navbar-nav>
    </div>
  </c-container>
</c-navbar>

Forms

Place various form controls and components within a navbar:

import { Component } from '@angular/core';
import {
  ButtonDirective,
  ContainerComponent,
  FormControlDirective,
  FormDirective,
  NavbarComponent
} from '@coreui/angular';

@Component({
  selector: 'docs-navbar-forms',
  templateUrl: './navbar-forms.component.html',
  imports: [NavbarComponent, ContainerComponent, FormDirective, FormControlDirective, ButtonDirective]
})
export class NavbarFormsComponent {}

<c-navbar class="bg-light" colorScheme="light">
  <c-container fluid>
    <form cForm class="d-flex" role="search">
      <input aria-label="Search" cFormControl class="me-2" placeholder="Search" type="search">
      <button cButton color="success" variant="outline">Search</button>
    </form>
  </c-container>
</c-navbar>

Immediate child elements of c-navbar use flex layout and will default to justify-content: space-between. Use additional flex utilities as needed to adjust this behavior.

import { Component } from '@angular/core';
import {
  ButtonDirective,
  ContainerComponent,
  FormControlDirective,
  FormDirective,
  NavbarBrandDirective,
  NavbarComponent
} from '@coreui/angular';

@Component({
  selector: 'docs-navbar-forms-2',
  templateUrl: './navbar-forms-2.component.html',
  imports: [
    NavbarComponent,
    ContainerComponent,
    NavbarBrandDirective,
    FormDirective,
    FormControlDirective,
    ButtonDirective
  ]
})
export class NavbarForms2Component {}

<c-navbar class="bg-light" colorScheme="light">
  <c-container fluid>
    <a cNavbarBrand href="https://coreui.io/angular/" target="_blank">
      Navbar
    </a>
    <form cForm class="d-flex" role="search">
      <input aria-label="Search" cFormControl class="me-2" placeholder="Search" type="search">
      <button cButton color="success" variant="outline">Search</button>
    </form>
  </c-container>
</c-navbar>

Input groups work, too. If your navbar is an entire form, or mostly a form, you can use the cForm element as the cContainer and save some HTML.

import { Component } from '@angular/core';
import {
  ContainerComponent,
  FormControlDirective,
  FormDirective,
  InputGroupComponent,
  InputGroupTextDirective,
  NavbarComponent
} from '@coreui/angular';

@Component({
  selector: 'docs-navbar-forms-3',
  templateUrl: './navbar-forms-3.component.html',
  imports: [
    NavbarComponent,
    FormDirective,
    ContainerComponent,
    InputGroupComponent,
    InputGroupTextDirective,
    FormControlDirective
  ]
})
export class NavbarForms3Component {}

<c-navbar class="bg-light" colorScheme="light">
  <form cContainer cForm fluid>
    <c-input-group>
      <span cInputGroupText>&#64;</span>
      <input aria-label="Username" cFormControl placeholder="Username">
    </c-input-group>
  </form>
</c-navbar>

Various buttons are supported as part of these navbar forms, too. This is also a great reminder that vertical alignment utilities can be used to align different sized elements.

import { Component } from '@angular/core';
import { ButtonDirective, ContainerComponent, FormDirective, NavbarComponent } from '@coreui/angular';

@Component({
  selector: 'docs-navbar-forms-4',
  templateUrl: './navbar-forms-4.component.html',
  imports: [NavbarComponent, FormDirective, ContainerComponent, ButtonDirective]
})
export class NavbarForms4Component {}

<c-navbar class="bg-light" colorScheme="light">
  <form cContainer cForm class="justify-content-start" fluid>
    <button cButton class="me-2" color="success" variant="outline">Main button</button>
    <button cButton color="secondary" size="sm" variant="outline">Smaller button</button>
  </form>
</c-navbar>

Text

Navbars may contain bits of text with the help of c-navbar-text. It adjusts vertical alignment and horizontal spacing for strings of text.

import { Component } from '@angular/core';
import { ContainerComponent, NavbarComponent, NavbarTextComponent } from '@coreui/angular';

@Component({
  selector: 'docs-navbar-text-example',
  templateUrl: './navbar-text-example.component.html',
  imports: [NavbarComponent, ContainerComponent, NavbarTextComponent]
})
export class NavbarTextExampleComponent {}

<c-navbar class="bg-light" colorScheme="light">
  <c-container fluid>
    <c-navbar-text>Navbar text with an inline element</c-navbar-text>
  </c-container>
</c-navbar>

Mix and match with other components and utilities as needed.

import { Component } from '@angular/core';
import {
  CollapseDirective,
  ContainerComponent,
  NavbarBrandDirective,
  NavbarComponent,
  NavbarNavComponent,
  NavbarTextComponent,
  NavbarTogglerDirective,
  NavItemComponent,
  NavLinkDirective
} from '@coreui/angular';

@Component({
  selector: 'docs-navbar-text-example-2',
  templateUrl: './navbar-text-example-2.component.html',
  imports: [
    NavbarComponent,
    ContainerComponent,
    NavbarBrandDirective,
    NavbarTogglerDirective,
    CollapseDirective,
    NavbarNavComponent,
    NavItemComponent,
    NavLinkDirective,
    NavbarTextComponent
  ]
})
export class NavbarTextExample2Component {}

<c-navbar class="bg-light" colorScheme="light" expand="lg">
  <c-container fluid>
    <a cNavbarBrand href="https://coreui.io/angular/" target="_blank">
      Navbar
    </a>
    <button [cNavbarToggler]="collapseRef"></button>
    <div #collapseRef="cCollapse" cCollapse navbar>
      <c-navbar-nav class="me-auto mb-2 mb-lg-0">
        <c-nav-item>
          <a [active] cNavLink>Home</a>
        </c-nav-item>
        <c-nav-item>
          <a cNavLink>Features</a>
        </c-nav-item>
        <c-nav-item>
          <a cNavLink>Pricing</a>
        </c-nav-item>
      </c-navbar-nav>
      <c-navbar-text>Inline text element</c-navbar-text>
    </div>
  </c-container>
</c-navbar>

Color schemes

Theming the navbar has never been easier thanks to the combination of theming classes and background-color utilities. Set colorScheme="light" for use with light background colors, or colorScheme="dark" for dark background colors. Then, customize with .bg-* utilities.

import { Component } from '@angular/core';
import { NgStyle } from '@angular/common';
import {
  ButtonDirective,
  CollapseDirective,
  ContainerComponent,
  DropdownComponent,
  DropdownItemDirective,
  DropdownMenuDirective,
  DropdownToggleDirective,
  FormControlDirective,
  FormDirective,
  NavbarBrandDirective,
  NavbarComponent,
  NavbarNavComponent,
  NavbarTogglerDirective,
  NavItemComponent,
  NavLinkDirective
} from '@coreui/angular';

@Component({
  selector: 'docs-navbar-color-schemes',
  templateUrl: './navbar-color-schemes.component.html',
  imports: [
    NavbarComponent,
    ContainerComponent,
    NavbarBrandDirective,
    NavbarTogglerDirective,
    CollapseDirective,
    NavbarNavComponent,
    NavItemComponent,
    NavLinkDirective,
    DropdownComponent,
    DropdownToggleDirective,
    DropdownMenuDirective,
    DropdownItemDirective,
    FormDirective,
    FormControlDirective,
    ButtonDirective,
    NgStyle
  ]
})
export class NavbarColorSchemesComponent {}

<c-navbar colorScheme="dark" expand="lg" class="bg-dark">
  <c-container fluid>
    <a cNavbarBrand href="https://coreui.io/angular/" target="_blank">
      Navbar
    </a>
    <button [cNavbarToggler]="collapseRef1"></button>
    <div #collapseRef1="cCollapse" navbar cCollapse>
      <c-navbar-nav class="me-auto mb-2 mb-lg-0">
        <c-nav-item>
          <a cNavLink [active]>Home</a>
        </c-nav-item>
        <c-nav-item>
          <a cNavLink>Link</a>
        </c-nav-item>
        <c-dropdown variant="nav-item" [popper]="false">
          <a cDropdownToggle cNavLink>Dropdown</a>
          <ul cDropdownMenu dark>
            <li><button cDropdownItem>Action</button></li>
            <li><button cDropdownItem>Another action</button></li>
            <li><button cDropdownItem>Something else here</button></li>
          </ul>
        </c-dropdown>
        <c-nav-item>
          <a cNavLink disabled class="d-block d-lg-none d-xl-block">Disabled</a>
        </c-nav-item>
      </c-navbar-nav>
      <form cForm class="d-flex" role="search">
        <input cFormControl type="search" placeholder="Search" aria-label="Search" class="me-2">
        <button cButton color="success" variant="outline">Search</button>
      </form>
    </div>
  </c-container>
</c-navbar>
<br>
<c-navbar colorScheme="dark" expand="lg" class="bg-primary">
  <c-container fluid>
    <a cNavbarBrand href="https://coreui.io/angular/" target="_blank">
      Navbar
    </a>
    <button [cNavbarToggler]="collapseRef2"></button>
    <div #collapseRef2="cCollapse" navbar cCollapse>
      <c-navbar-nav class="me-auto mb-2 mb-lg-0">
        <c-nav-item>
          <a cNavLink [active]>Home</a>
        </c-nav-item>
        <c-nav-item>
          <a cNavLink>Link</a>
        </c-nav-item>
        <c-dropdown variant="nav-item" [popper]="false">
          <a cDropdownToggle cNavLink>Dropdown</a>
          <ul cDropdownMenu>
            <li><button cDropdownItem>Action</button></li>
            <li><button cDropdownItem>Another action</button></li>
            <li><button cDropdownItem>Something else here</button></li>
          </ul>
        </c-dropdown>
        <c-nav-item>
          <a cNavLink disabled class="d-block d-lg-none d-xl-block">Disabled</a>
        </c-nav-item>
      </c-navbar-nav>
      <form cForm class="d-flex" role="search">
        <input cFormControl type="search" placeholder="Search" aria-label="Search" class="me-2">
        <button cButton color="success" variant="outline">Search</button>
      </form>
    </div>
  </c-container>
</c-navbar>
<br>
<c-navbar colorScheme="light" expand="lg" [ngStyle]="{ backgroundColor: '#e3f2fd' }">
  <c-container fluid>
    <a cNavbarBrand href="https://coreui.io/angular/" target="_blank">
      Navbar
    </a>
    <button [cNavbarToggler]="collapseRef3"></button>
    <div #collapseRef3="cCollapse" navbar cCollapse>
      <c-navbar-nav class="me-auto mb-2 mb-lg-0">
        <c-nav-item>
          <a cNavLink [active]>Home</a>
        </c-nav-item>
        <c-nav-item>
          <a cNavLink>Link</a>
        </c-nav-item>
        <c-dropdown variant="nav-item" [popper]="false">
          <a cDropdownToggle cNavLink>Dropdown</a>
          <ul cDropdownMenu [ngStyle]="{ backgroundColor: '#e3f2fd' }">
            <li><button cDropdownItem>Action</button></li>
            <li><button cDropdownItem>Another action</button></li>
            <li><button cDropdownItem>Something else here</button></li>
          </ul>
        </c-dropdown>
        <c-nav-item>
          <a cNavLink disabled class="d-block d-lg-none d-xl-block">Disabled</a>
        </c-nav-item>
      </c-navbar-nav>
      <form cForm class="d-flex" role="search">
        <input cFormControl type="search" placeholder="Search" aria-label="Search" class="me-2">
        <button cButton color="success" variant="outline">Search</button>
      </form>
    </div>
  </c-container>
</c-navbar>

Containers

Although it’s not required, you can wrap a c-navbar in a c-container to center it on a page–though. Note that an inner container is still needed. Or you can add a container inside the c-navbar to only center the contents of a fixed or static top navbar.

import { Component } from '@angular/core';
import { ContainerComponent, NavbarBrandDirective, NavbarComponent } from '@coreui/angular';

@Component({
  selector: 'docs-navbar-containers',
  templateUrl: './navbar-containers.component.html',
  imports: [ContainerComponent, NavbarComponent, NavbarBrandDirective]
})
export class NavbarContainersComponent {}

<c-container>
  <c-navbar class="bg-light" colorScheme="light" expand="lg">
    <c-container fluid>
      <a cNavbarBrand>Navbar</a>
    </c-container>
  </c-navbar>
</c-container>

Use any of the responsive containers to change how wide the content in your navbar is presented.

import { Component } from '@angular/core';
import { ContainerComponent, NavbarBrandDirective, NavbarComponent } from '@coreui/angular';

@Component({
  selector: 'docs-navbar-containers-2',
  templateUrl: './navbar-containers-2.component.html',
  imports: [NavbarComponent, ContainerComponent, NavbarBrandDirective]
})
export class NavbarContainers2Component {}

<c-navbar class="bg-light" colorScheme="light" expand="lg">
  <c-container breakpoint="md">
    <a cNavbarBrand>Navbar</a>
  </c-container>
</c-navbar>

Placement

Use our placement properly to place navbars in non-static positions. Choose from fixed to the top, fixed to the bottom, or stickied to the top (scrolls with the page until it reaches the top, then stays there). Fixed navbars use position: fixed, meaning they’re pulled from the normal flow of the DOM and may require custom CSS (e.g., padding-top on the body) to prevent overlap with other elements.

Also note that .sticky-top uses position: sticky, which isn’t fully supported in every browser.

import { Component } from '@angular/core';
import { ContainerComponent, NavbarBrandDirective, NavbarComponent } from '@coreui/angular';

@Component({
  selector: 'docs-navbar-placement',
  templateUrl: './navbar-placement.component.html',
  imports: [NavbarComponent, ContainerComponent, NavbarBrandDirective]
})
export class NavbarPlacementComponent {}

<c-navbar colorScheme="light" class="bg-light">
  <c-container fluid>
    <a cNavbarBrand>Default</a>
  </c-container>
</c-navbar>

import { Component } from '@angular/core';
import { ContainerComponent, NavbarBrandDirective, NavbarComponent } from '@coreui/angular';

@Component({
  selector: 'docs-navbar-placement-fixed-top',
  templateUrl: './navbar-placement-fixed-top.component.html',
  imports: [NavbarComponent, ContainerComponent, NavbarBrandDirective]
})
export class NavbarPlacementFixedTopComponent {}

<c-navbar colorScheme="light" class="bg-light" placement="fixed-top">
  <c-container fluid>
    <a cNavbarBrand>Fixed top</a>
  </c-container>
</c-navbar>

import { Component } from '@angular/core';
import { ContainerComponent, NavbarBrandDirective, NavbarComponent } from '@coreui/angular';

@Component({
  selector: 'docs-navbar-placement-fixed-bottom',
  templateUrl: './navbar-placement-fixed-bottom.component.html',
  imports: [NavbarComponent, ContainerComponent, NavbarBrandDirective]
})
export class NavbarPlacementFixedBottomComponent {}

<c-navbar colorScheme="light" class="bg-light" placement="fixed-bottom">
  <c-container fluid>
    <a cNavbarBrand>Fixed bottom</a>
  </c-container>
</c-navbar>

import { Component } from '@angular/core';
import { ContainerComponent, NavbarBrandDirective, NavbarComponent } from '@coreui/angular';

@Component({
  selector: 'docs-navbar-placement-sticky-top',
  templateUrl: './navbar-placement-sticky-top.component.html',
  imports: [NavbarComponent, ContainerComponent, NavbarBrandDirective]
})
export class NavbarPlacementStickyTopComponent {}

<c-navbar colorScheme="light" class="bg-light" placement="sticky-top">
  <c-container fluid>
    <a cNavbarBrand>Sticky top</a>
  </c-container>
</c-navbar>

Scrolling

Add scroll prop to a c-navbar-nav to enable vertical scrolling within the toggleable contents of a collapsed navbar. By default, scrolling kicks in at 75vh (75% of the viewport height), but you can override that with the local CSS custom property --cui-navbar-height or custom styles. At larger viewports when the navbar is expanded, content will appear as it does in a default navbar.

Please note that this behavior comes with a potential drawback of overflow — when setting overflow-y: auto (required to scroll the content here), overflow-x is the equivalent of auto, which will crop some horizontal content.

The example navbar uses scroll with style=“—cui-scroll-height: 80px;”, with some extra margin utilities for optimum spacing.

import { Component } from '@angular/core';
import { RouterLink } from '@angular/router';
import {
  CollapseDirective,
  ContainerComponent,
  NavbarBrandDirective,
  NavbarComponent,
  NavbarNavComponent,
  NavbarTogglerDirective,
  NavLinkDirective
} from '@coreui/angular';

@Component({
  selector: 'docs-navbar-scrolling',
  templateUrl: './navbar-scrolling.component.html',
  imports: [
    NavbarComponent,
    ContainerComponent,
    NavbarBrandDirective,
    NavbarTogglerDirective,
    CollapseDirective,
    NavbarNavComponent,
    NavLinkDirective,
    RouterLink
  ]
})
export class NavbarScrollingComponent {}

<c-navbar class="bg-light" colorScheme="light" expand="lg">
  <c-container fluid>
    <a cNavbarBrand href="https://coreui.io/angular/" target="_blank">
      Navbar
    </a>
    <button [cNavbarToggler]="collapseRef"></button>
    <div #collapseRef="cCollapse" cCollapse navbar>
      <c-navbar-nav class="me-auto mb-lg-0" scroll style="--cui-scroll-height: 80px;">
        <a [active] cNavLink routerLink="./">Home</a>
        <a cNavLink routerLink="./" >Features</a>
        <a cNavLink routerLink="./">Pricing</a>
        <a cNavLink disabled routerLink="./">Disabled</a>
      </c-navbar-nav>
    </div>
  </c-container>
</c-navbar>

Responsive behavior

Navbars can use cNavbarToggler, cCollapse, and expand="sm|md|lg|xl|xxl" property to determine when their content collapses behind a button. In combination with other utilities, you can easily choose when to show or hide particular elements.

For navbars that never collapse, add the expand boolean property on the c-navbar. For navbars that always collapse, don’t add any property.

Toggler

Navbar togglers are left-aligned by default, but should they follow a sibling element like a cNavbarBrand, they’ll automatically be aligned to the far right. Reversing your markup will reverse the placement of the toggler. Below are examples of different toggle styles.

With no cNavbarBrand shown at the smallest breakpoint:

import { Component } from '@angular/core';
import {
  ButtonDirective,
  CollapseDirective,
  ContainerComponent,
  FormControlDirective,
  FormDirective,
  NavbarBrandDirective,
  NavbarComponent,
  NavbarNavComponent,
  NavbarTogglerDirective,
  NavItemComponent,
  NavLinkDirective
} from '@coreui/angular';

@Component({
  selector: 'docs-navbar-toggler',
  templateUrl: './navbar-toggler.component.html',
  imports: [
    NavbarComponent,
    ContainerComponent,
    NavbarTogglerDirective,
    CollapseDirective,
    NavbarBrandDirective,
    NavbarNavComponent,
    NavItemComponent,
    NavLinkDirective,
    FormDirective,
    FormControlDirective,
    ButtonDirective
  ]
})
export class NavbarTogglerComponent {}

<c-navbar colorScheme="light" expand="lg" class="bg-light">
  <c-container fluid>
    <button [cNavbarToggler]="collapseRef"></button>
    <div #collapseRef="cCollapse" navbar cCollapse>
      <a cNavbarBrand class="d-lg-block d-none">
        Hidden brand
      </a>
      <c-navbar-nav class="me-auto mb-2 mb-lg-0">
        <c-nav-item>
          <a cNavLink [active]>Home</a>
        </c-nav-item>
        <c-nav-item>
          <a cNavLink>Link</a>
        </c-nav-item>
        <c-nav-item>
          <a cNavLink disabled class="d-block d-lg-none d-xl-block">Disabled</a>
        </c-nav-item>
      </c-navbar-nav>
      <form cForm class="d-flex" role="search">
        <input cFormControl type="search" placeholder="Search" aria-label="Search" class="me-2">
        <button cButton color="success" variant="outline">Search</button>
      </form>
    </div>
  </c-container>
</c-navbar>

With a brand name shown on the left and toggler on the right:

import { Component } from '@angular/core';
import {
  ButtonDirective,
  CollapseDirective,
  ContainerComponent,
  FormControlDirective,
  FormDirective,
  NavbarBrandDirective,
  NavbarComponent,
  NavbarNavComponent,
  NavbarTogglerDirective,
  NavItemComponent,
  NavLinkDirective
} from '@coreui/angular';

@Component({
  selector: 'docs-navbar-toggler-2',
  templateUrl: './navbar-toggler-2.component.html',
  imports: [
    NavbarComponent,
    ContainerComponent,
    NavbarBrandDirective,
    NavbarTogglerDirective,
    CollapseDirective,
    NavbarNavComponent,
    NavItemComponent,
    NavLinkDirective,
    FormDirective,
    FormControlDirective,
    ButtonDirective
  ]
})
export class NavbarToggler2Component {}

<c-navbar colorScheme="light" expand="lg" class="bg-light">
  <c-container fluid>
    <a cNavbarBrand>
      Navbar
    </a>
    <button [cNavbarToggler]="collapseRef"></button>
    <div #collapseRef="cCollapse" navbar cCollapse>
      <c-navbar-nav class="me-auto mb-2 mb-lg-0">
        <c-nav-item>
          <a cNavLink [active]>Home</a>
        </c-nav-item>
        <c-nav-item>
          <a cNavLink>Link</a>
        </c-nav-item>
        <c-nav-item>
          <a cNavLink disabled class="d-block d-lg-none d-xl-block">Disabled</a>
        </c-nav-item>
      </c-navbar-nav>
      <form cForm class="d-flex" role="search">
        <input cFormControl type="search" placeholder="Search" aria-label="Search" class="me-2">
        <button cButton color="success" variant="outline">Search</button>
      </form>
    </div>
  </c-container>
</c-navbar>

With a toggler on the left and brand name on the right:

import { Component } from '@angular/core';
import {
  ButtonDirective,
  CollapseDirective,
  ContainerComponent,
  FormControlDirective,
  FormDirective,
  NavbarBrandDirective,
  NavbarComponent,
  NavbarNavComponent,
  NavbarTogglerDirective,
  NavItemComponent,
  NavLinkDirective
} from '@coreui/angular';

@Component({
  selector: 'docs-navbar-toggler-3',
  templateUrl: './navbar-toggler-3.component.html',
  imports: [
    NavbarComponent,
    ContainerComponent,
    NavbarTogglerDirective,
    NavbarBrandDirective,
    CollapseDirective,
    NavbarNavComponent,
    NavItemComponent,
    NavLinkDirective,
    FormDirective,
    FormControlDirective,
    ButtonDirective
  ]
})
export class NavbarToggler3Component {}

<c-navbar colorScheme="light" expand="lg" class="bg-light">
  <c-container fluid>
    <button [cNavbarToggler]="collapseRef"></button>
    <a cNavbarBrand>
      Navbar
    </a>
    <div #collapseRef="cCollapse" navbar cCollapse>
      <c-navbar-nav class="me-auto mb-2 mb-lg-0">
        <c-nav-item>
          <a cNavLink [active]>Home</a>
        </c-nav-item>
        <c-nav-item>
          <a cNavLink>Link</a>
        </c-nav-item>
        <c-nav-item>
          <a cNavLink disabled class="d-block d-lg-none d-xl-block">Disabled</a>
        </c-nav-item>
      </c-navbar-nav>
      <form cForm class="d-flex" role="search">
        <input cFormControl type="search" placeholder="Search" aria-label="Search" class="me-2">
        <button cButton color="success" variant="outline">Search</button>
      </form>
    </div>
  </c-container>
</c-navbar>

External content

Sometimes you want to use the collapse plugin to trigger a container element for content that structurally sits outside of the c-navbar.

import { Component } from '@angular/core';
import { CollapseDirective, ContainerComponent, NavbarComponent, NavbarTogglerDirective } from '@coreui/angular';

@Component({
  selector: 'docs-navbar-external-content',
  templateUrl: './navbar-external-content.component.html',
  imports: [CollapseDirective, NavbarComponent, ContainerComponent, NavbarTogglerDirective]
})
export class NavbarExternalContentComponent {}

<div #collapseRef="cCollapse" navbar cCollapse data-coreui-theme="dark">
  <div class="bg-dark p-4">
    <h5 class="text-body-emphasis h4">Collapsed content</h5>
    <span class="text-body-secondary">Toggleable via the navbar brand.</span>
  </div>
</div>

<c-navbar colorScheme="dark" class="bg-dark">
  <c-container fluid>
    <button [cNavbarToggler]="collapseRef"></button>
  </c-container>
</c-navbar>

Do not forget about users of assistive technologies. In this case you should move the focus programmatically to the opened container. Make sure that the toggler has also the aria-controls attribute, pointing to the id of the content container.

Offcanvas

Transform your expanding and collapsing navbar into an offcanvas drawer. You can extend both the offcanvas default styles and use our expand="*" prop to create a custom navigation sidebar.

In the example below, to create an offcanvas navbar that is always collapsed across all breakpoints, omit the expand="*" prop entirely.

import { Component } from '@angular/core';
import {
  ButtonCloseDirective,
  ButtonDirective,
  ContainerComponent,
  DropdownComponent,
  DropdownItemDirective,
  DropdownMenuDirective,
  DropdownToggleDirective,
  FormControlDirective,
  FormDirective,
  NavbarBrandDirective,
  NavbarComponent,
  NavbarNavComponent,
  NavbarTogglerDirective,
  NavItemComponent,
  NavLinkDirective,
  OffcanvasBodyComponent,
  OffcanvasComponent,
  OffcanvasHeaderComponent,
  OffcanvasTitleDirective,
  OffcanvasToggleDirective
} from '@coreui/angular';

@Component({
  selector: 'docs-navbar-offcanvas',
  templateUrl: './navbar-offcanvas.component.html',
  imports: [
    NavbarComponent,
    ContainerComponent,
    OffcanvasToggleDirective,
    NavbarTogglerDirective,
    OffcanvasComponent,
    OffcanvasHeaderComponent,
    OffcanvasTitleDirective,
    ButtonCloseDirective,
    OffcanvasBodyComponent,
    NavbarNavComponent,
    NavItemComponent,
    NavLinkDirective,
    DropdownComponent,
    DropdownToggleDirective,
    DropdownMenuDirective,
    DropdownItemDirective,
    FormDirective,
    FormControlDirective,
    ButtonDirective,
    NavbarBrandDirective
  ]
})
export class NavbarOffcanvasComponent {}

<c-navbar colorScheme="light" class="bg-light">
  <c-container fluid>
    <span cNavbarBrand>Offcanvas navbar</span>
    <button [cNavbarToggler] cOffcanvasToggle="OffcanvasSidebar"></button>
    <c-offcanvas
      placement="end"
      id="OffcanvasSidebar"
    >
      <c-offcanvas-header>
        <h5 cOffcanvasTitle>Offcanvas</h5>
        <button
          cButtonClose
          class="text-reset ms-auto"
          cOffcanvasToggle="OffcanvasSidebar"
          aria-label="Close"
        ></button>
      </c-offcanvas-header>
      <c-offcanvas-body>
        <c-navbar-nav>
          <c-nav-item>
            <a cNavLink [active]>Home</a>
          </c-nav-item>
          <c-nav-item>
            <a cNavLink>Link</a>
          </c-nav-item>
          <c-dropdown variant="nav-item" [popper]="false">
            <a cDropdownToggle cNavLink>Dropdown</a>
            <ul cDropdownMenu>
              <li><button cDropdownItem>Action</button></li>
              <li><button cDropdownItem>Another action</button></li>
              <li><button cDropdownItem>Something else here</button></li>
            </ul>
          </c-dropdown>
          <c-nav-item>
            <a cNavLink disabled>Disabled</a>
          </c-nav-item>
        </c-navbar-nav>
        <form cForm class="d-flex" role="search">
          <input cFormControl type="search" placeholder="Search" aria-label="Search" class="me-2">
          <button cButton color="success" variant="outline">Search</button>
        </form>
      </c-offcanvas-body>
    </c-offcanvas>
  </c-container>
</c-navbar>

To create an offcanvas navbar that expands into a normal navbar at a specific breakpoint like xl, use expand="xl" property.

import { Component } from '@angular/core';
import {
  ButtonCloseDirective,
  ButtonDirective,
  ContainerComponent,
  DropdownComponent,
  DropdownDividerDirective,
  DropdownItemDirective,
  DropdownMenuDirective,
  DropdownToggleDirective,
  FormControlDirective,
  FormDirective,
  NavbarBrandDirective,
  NavbarComponent,
  NavbarNavComponent,
  NavbarTogglerDirective,
  NavItemComponent,
  NavLinkDirective,
  OffcanvasBodyComponent,
  OffcanvasComponent,
  OffcanvasHeaderComponent,
  OffcanvasTitleDirective,
  OffcanvasToggleDirective
} from '@coreui/angular';

@Component({
  selector: 'docs-navbar-offcanvas-2',
  templateUrl: './navbar-offcanvas-2.component.html',
  imports: [
    NavbarComponent,
    ContainerComponent,
    NavbarBrandDirective,
    OffcanvasToggleDirective,
    NavbarTogglerDirective,
    OffcanvasComponent,
    OffcanvasHeaderComponent,
    OffcanvasTitleDirective,
    ButtonCloseDirective,
    OffcanvasBodyComponent,
    NavbarNavComponent,
    NavItemComponent,
    NavLinkDirective,
    DropdownComponent,
    DropdownToggleDirective,
    DropdownMenuDirective,
    DropdownItemDirective,
    DropdownDividerDirective,
    FormDirective,
    FormControlDirective,
    ButtonDirective
  ]
})
export class NavbarOffcanvas2Component {}

<c-navbar colorScheme="dark" class="bg-dark" expand="xl" placement="fixed-top">
  <c-container fluid>
    <a cNavbarBrand>
      Offcanvas navbar dark
    </a>
    <button [cNavbarToggler] cOffcanvasToggle="OffcanvasSidebarDark"></button>
    <c-offcanvas
      placement="end"
      id="OffcanvasSidebarDark"
      class="text-bg-dark"
      tabindex="-1"
    >
      <c-offcanvas-header>
        <h5 cOffcanvasTitle>Offcanvas</h5>
        <button
          cButtonClose
          class="text-reset ms-auto"
          cOffcanvasToggle="OffcanvasSidebarDark"
          aria-label="Close"
          white
        ></button>
      </c-offcanvas-header>
      <c-offcanvas-body>
        <c-navbar-nav class="justify-content-end flex-grow-1 pe-3">
          <c-nav-item>
            <a cNavLink [active]="true">Home</a>
          </c-nav-item>
          <c-nav-item>
            <a cNavLink>Link</a>
          </c-nav-item>
          <c-dropdown variant="nav-item" [popper]="false">
            <a cDropdownToggle cNavLink>Dropdown</a>
            <ul cDropdownMenu dark>
              <li><button cDropdownItem>Action</button></li>
              <li><button cDropdownItem>Another action</button></li>
              <li cDropdownDivider></li>
              <li><button cDropdownItem>Something else here</button></li>
            </ul>
          </c-dropdown>
        </c-navbar-nav>
        <form cForm class="d-flex mt-lg-3 mt-xl-0" role="search">
          <input cFormControl type="search" placeholder="Search" aria-label="Search" class="me-2">
          <button cButton color="success">Search</button>
        </form>
      </c-offcanvas-body>
    </c-offcanvas>
  </c-container>
</c-navbar>

Customizing

CSS variables

Angular navbar uses 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.

--cui-navbar-padding-x: #{if($navbar-padding-x == null, 0, $navbar-padding-x)};
--cui-navbar-padding-y: #{$navbar-padding-y};
--cui-navbar-color: #{$navbar-light-color};
--cui-navbar-hover-color: #{$navbar-light-hover-color};
--cui-navbar-disabled-color: #{$navbar-light-disabled-color};
--cui-navbar-active-color: #{$navbar-light-active-color};
--cui-navbar-brand-padding-y: #{$navbar-brand-padding-y};
--cui-navbar-brand-margin-end: #{$navbar-brand-margin-end};
--cui-navbar-brand-font-size: #{$navbar-brand-font-size};
--cui-navbar-brand-color: #{$navbar-light-brand-color};
--cui-navbar-brand-hover-color: #{$navbar-light-brand-hover-color};
--cui-navbar-nav-link-padding-x: #{$navbar-nav-link-padding-x};
--cui-navbar-toggler-padding-y: #{$navbar-toggler-padding-y};
--cui-navbar-toggler-padding-x: #{$navbar-toggler-padding-x};
--cui-navbar-toggler-font-size: #{$navbar-toggler-font-size};
--cui-navbar-toggler-icon-bg: #{escape-svg($navbar-light-toggler-icon-bg)};
--cui-navbar-toggler-border-color: #{$navbar-light-toggler-border-color};
--cui-navbar-toggler-border-radius: #{$navbar-toggler-border-radius};
--cui-navbar-toggler-focus-width: #{$navbar-toggler-focus-width};
--cui-navbar-toggler-transition: #{$navbar-toggler-transition};

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

--cui-nav-link-padding-x: 0;
--cui-nav-link-padding-y: #{$nav-link-padding-y};
--cui-nav-link-color: var(--cui-navbar-color);
--cui-nav-link-hover-color: var(--cui-navbar-hover-color);
--cui-nav-link-disabled-color: var(--cui-navbar-disabled-color);

How to use CSS variables

const vars = {
  '--my-css-var': 10,
  '--my-another-css-var': "red"
}

<div [ngStyle]="vars"></div>

SASS variables

$navbar-padding-y:                  $spacer * .5;
$navbar-padding-x:                  null;

$navbar-nav-link-padding-x:         .5rem;

$navbar-brand-font-size:            $font-size-lg;
// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
$nav-link-height:                   $font-size-base * $line-height-base + $nav-link-padding-y * 2;
$navbar-brand-height:               $navbar-brand-font-size * $line-height-base;
$navbar-brand-padding-y:            ($nav-link-height - $navbar-brand-height) * .5;
$navbar-brand-margin-end:           1rem;

$navbar-toggler-padding-y:          .25rem;
$navbar-toggler-padding-x:          .75rem;
$navbar-toggler-font-size:          $font-size-lg;
$navbar-toggler-border-radius:      $btn-border-radius;
$navbar-toggler-focus-width:        $btn-focus-width;
$navbar-toggler-transition:         box-shadow .15s ease-in-out;

$navbar-dark-color:                 $medium-emphasis-inverse;
$navbar-dark-hover-color:           $high-emphasis-inverse;
$navbar-dark-active-color:          $high-emphasis-inverse;
$navbar-dark-disabled-color:        $disabled-inverse;
$navbar-dark-toggler-icon-bg:       url("data:image/svg+xml,&lt;svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'>&lt;path stroke=' #{$navbar-dark-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/>&lt;/svg>");
$navbar-dark-toggler-border-color:  rgba($white, .1);

$navbar-light-color:                $medium-emphasis;
$navbar-light-hover-color:          $high-emphasis;
$navbar-light-active-color:         $high-emphasis;
$navbar-light-disabled-color:       $disabled;
$navbar-light-toggler-icon-bg:      url("data:image/svg+xml,&lt;svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'>&lt;path stroke=' #{$navbar-light-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/>&lt;/svg>");
$navbar-light-toggler-border-color: rgba($black, .1);

$navbar-light-brand-color:                $navbar-light-active-color;
$navbar-light-brand-hover-color:          $navbar-light-active-color;
$navbar-dark-brand-color:                 $navbar-dark-active-color;
$navbar-dark-brand-hover-color:           $navbar-dark-active-color;

API reference

import { NavbarModule } from '@coreui/angular';

@NgModule({
    imports: [NavbarModule,]
})
export class AppModule() { }

component

jsx

import { NavbarComponent } from '@coreui/angular'

Property	Default	Type
color	-	`string`
Sets the color context of the component to one of CoreUI’s themed colors.
colorScheme	-	`'dark'`, `'light'`
Sets the dark theme attribute on the host element.
container	-	`boolean`, `'sm'`, `'md'`, `'lg'`, `'xl'`, `'xxl'`, `'fluid'`
Defines optional container wrapping children elements.
expand	-	`boolean`, `'sm'`, `'md'`, `'lg'`, `'xl'`, `'xxl'`
Defines the responsive breakpoint to determine when content collapses.
placement	-	`'fixed-top'`, `'fixed-bottom'`, `'sticky-top'`
Place component in non-static positions.
role	`'navigation'`	`string`
HTML element role.

component

jsx

import { NavbarNavComponent } from '@coreui/angular'

Property	Default	Type
scroll	`false`	`boolean`
Enable vertical scrolling of a collapsed navbar toggleable contents.

component

jsx

import { NavbarTextComponent } from '@coreui/angular'

cNavbarToggler

directive

jsx

import { NavbarTogglerDirective } from '@coreui/angular'

Property	Default	Type
ariaLabel	`'Toggle navigation'`	`string`
Default aria-label attr for navbar-toggler
cNavbarToggler	`undefined`	`CollapseDirective`
Reference to navbar collapse element (via # template variable)
type	`'button'`	`string`
Default type for navbar-toggler

cNavbarBrand

directive

jsx

import { NavbarBrandDirective } from '@coreui/angular'

Property	Default	Type
role	`'button'`	`string`
Default role for navbar-brand.

Angular Navbar Component

Navbar

Available in Other JavaScript Frameworks

Supported content

Examples

Basic usage

Brand

Nav

Forms

Text

Color schemes

Containers

Placement

Scrolling

Responsive behavior

Toggler

External content

Offcanvas

Customizing

CSS variables

How to use CSS variables

SASS variables

API reference

Navbar Module

c-navbar

c-navbar-nav

c-navbar-text

cNavbarToggler

cNavbarBrand