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_||