Are you ready for Cyber ~~Monday~~ Week Deals?

Extra 25% off for all sale items + Free CoreUI Icons PRO with every order! Limited offer for the first 100 people, use code 2024BWCW25 during checkout.

On this page

Angular Header Component

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

## 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.

--- ## API reference ### Header Module ```typescript import { HeaderModule } from '@coreui/angular'; @NgModule({ imports: [HeaderModule,] }) export class AppModule() { } ``` --- ### c-header _component_ ##### Inputs

|prop|description|type|default|notes| |---|:---|:---|:---|---| |`container`| Defines optional container wrapping children elements | `Container` |_undefined_|`boolean , string` |`position`| Place a footer in non-static positions | `Positions` |_undefined_|`fixed, sticky` |`role`| Default role for a header |`string`|_header_||

### c-header-brand _component_ ##### Inputs

|prop|description|type|default|notes| |---|:---|:---|:---|---| |`role`| Default role for a header-brand |`string`|_button_||

### c-header-nav _component_ ##### Inputs

|prop|description|type|default|notes| |---|:---|:---|:---|---| |`role`| Default role for a header-nav |`string`|_navigation_||

### cHeaderText _directive_ ### cHeaderToggler _directive_ ##### Inputs

|prop|description|type|default|notes| |---|:---|:---|:---|---| |`type`| Default type for a header-brand |`string`|_button_|| |`aria-label`| Default aria-label attr for header-toggler |`string`|_Toggle navigation_||