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

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 { HeaderModule } from '@coreui/angular';

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

component

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

component

prop	description	type	default	notes
`role`	Default role for a header-brand	`string`	button

component

prop	description	type	default	notes
`role`	Default role for a header-nav	`string`	navigation

directive

directive

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