Angular Header Component

Header

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

Available in Other JavaScript Frameworks

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

On this page

Supported content

Headers come with built-in support for a handful of sub-components. Choose from the following as needed:

cHeaderBrand for your company, product, or project name
cHeaderNav for a full-height and lightweight navigation (including support for dropdowns)
cHeaderToggler for use with navigation toggling
cHeaderText for adding vertically centered strings of text
cHeaderDivider to separate subheaders
Flex and spacing utilities for any form controls and actions

Examples

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

import { Component } from '@angular/core';
import { RouterLink } from '@angular/router';

import {
  ContainerComponent,
  DropdownComponent,
  DropdownDividerDirective,
  DropdownItemDirective,
  DropdownMenuDirective,
  DropdownToggleDirective,
  HeaderBrandComponent,
  HeaderComponent,
  HeaderDividerComponent,
  HeaderNavComponent,
  HeaderTextComponent,
  NavItemComponent,
  NavLinkDirective
} from '@coreui/angular';

@Component({
  selector: 'docs-header-example',
  templateUrl: './header-example.component.html',
  styleUrls: ['./header-example.component.scss'],
  imports: [
    RouterLink,
    ContainerComponent,
    DropdownComponent,
    DropdownDividerDirective,
    DropdownItemDirective,
    DropdownMenuDirective,
    DropdownToggleDirective,
    HeaderBrandComponent,
    HeaderComponent,
    HeaderDividerComponent,
    HeaderNavComponent,
    HeaderTextComponent,
    NavItemComponent,
    NavLinkDirective
  ]
})
export class HeaderExampleComponent {}

<c-header>
  <c-container fluid>
    <c-header-brand [routerLink]>Brand</c-header-brand>
    <c-header-nav class="ms-auto">
      <c-nav-item>
        <a [active]="true" [routerLink] cNavLink>Home</a>
      </c-nav-item>
      <c-nav-item>
        <a cNavLink routerLink="/components/alert">Link</a>
      </c-nav-item>
      <c-nav-item>
        <a cNavLink disabled routerLink="/components/alert">Disabled</a>
      </c-nav-item>
      <c-dropdown alignment="end">
        <a cDropdownToggle cNavLink>Dropdown</a>
        <ul cDropdownMenu>
          <li><a [routerLink]="[]" cDropdownItem>Action</a></li>
          <li><a [routerLink]="[]" cDropdownItem>Another action</a></li>
          <li>
            <hr cDropdownDivider>
          </li>
          <li><a [routerLink]="[]" cDropdownItem>Something else</a></li>
        </ul>
      </c-dropdown>
    </c-header-nav>
  </c-container>
  <c-header-divider />
  <c-container fluid>
    <c-header-text>Additional text</c-header-text>
  </c-container>
</c-header>

.header-toggler-icon {
  min-width: 25px;
}

API reference

Header Module

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

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

c-header

component

jsx

import { HeaderComponent } from '@coreui/angular'

Property	Default	Type
container	-	`Container`
Defines optional container wrapping children elements
position	-	`Positions`
Place header in non-static positions
role	`'banner'`	`string`
Default role for header

component

jsx

import { HeaderBrandComponent } from '@coreui/angular'

Property	Default	Type
role	`'button'`	`string`
Default role for header-brand

component

jsx

import { HeaderNavComponent } from '@coreui/angular'

Property	Default	Type
role	`'navigation'`	`string`
Default role for header-nav

c-header-text

component

jsx

import { HeaderTextComponent } from '@coreui/angular'

cHeaderToggler

directive

jsx

import { HeaderTogglerDirective } from '@coreui/angular'

Property	Default	Type
ariaLabel	`'Toggle navigation'`	`string`
Default aria-label attr for header-toggler
type	`'button'`	`string`
Default type for header-toggler button