React Header Component

Documentation and examples for the Header 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 our collapse plugin and other navigation toggling behaviors.
  • Flex and spacing utilities for any form controls and actions.
  • <CHeaderText> for adding vertically centered strings of text.
  • <CCollapse className="header-collapse"> for grouping and hiding header contents by a parent breakpoint.

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

Basic usage#

1const [visible, setVisible] = useState(false)
2return (
3 <>
4 <CHeader>
5 <CContainer fluid>
6 <CHeaderBrand href="#">Header</CHeaderBrand>
7 <CHeaderToggler onClick={() => setVisible(!visible)} />
8 <CCollapse className="header-collapse" visible={visible}>
9 <CHeaderNav>
10 <CNavItem>
11 <CNavLink href="#" active>
12 Home
13 </CNavLink>
14 </CNavItem>
15 <CNavItem>
16 <CNavLink href="#">Link</CNavLink>
17 </CNavItem>
18 <CDropdown variant="nav-item">
19 <CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
20 <CDropdownMenu>
21 <CDropdownItem href="#">Action</CDropdownItem>
22 <CDropdownItem href="#">Another action</CDropdownItem>
23 <CDropdownDivider />
24 <CDropdownItem href="#">Something else here</CDropdownItem>
25 </CDropdownMenu>
26 </CDropdown>
27 <CNavItem>
28 <CNavLink href="#" disabled>
29 Disabled
30 </CNavLink>
31 </CNavItem>
32 </CHeaderNav>
33 <CForm className="d-flex">
34 <CFormInput className="me-2" type="search" placeholder="Search" />
35 <CButton type="submit" color="success" variant="outline">
36 Search
37 </CButton>
38 </CForm>
39 </CCollapse>
40 </CContainer>
41 </CHeader>
42 </>
43)

API#

CHeader#

1import { CHeader } from '@coreui/react'
2// or
3import CHeader from '@coreui/react/src/components/header/CHeader'
PropertyDescriptionTypeDefault
classNameA string of all className you want applied to the component.string-
containerDefines optional container wrapping children elements.boolean | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'fluid'-
positionPlace header in non-static positions.'fixed' | 'sticky'-

CHeaderBrand#

1import { CHeaderBrand } from '@coreui/react'
2// or
3import CHeaderBrand from '@coreui/react/src/components/header/CHeaderBrand'
PropertyDescriptionTypeDefault
classNameA string of all className you want applied to the component.string-
componentComponent used for the root node. Either a string to use a HTML element or a component.string | ComponentClass<any, any> | FunctionComponent<any>-

CHeaderDivider#

1import { CHeaderDivider } from '@coreui/react'
2// or
3import CHeaderDivider from '@coreui/react/src/components/header/CHeaderDivider'
PropertyDescriptionTypeDefault
classNameA string of all className you want applied to the component.string-

CHeaderNav#

1import { CHeaderNav } from '@coreui/react'
2// or
3import CHeaderNav from '@coreui/react/src/components/header/CHeaderNav'
PropertyDescriptionTypeDefault
classNameA string of all className you want applied to the component.string-
componentComponent used for the root node. Either a string to use a HTML element or a component.string | ComponentClass<any, any> | FunctionComponent<any>-

CHeaderText#

1import { CHeaderText } from '@coreui/react'
2// or
3import CHeaderText from '@coreui/react/src/components/header/CHeaderText'
PropertyDescriptionTypeDefault
classNameA string of all className you want applied to the base component.string-

CHeaderToggler#

1import { CHeaderToggler } from '@coreui/react'
2// or
3import CHeaderToggler from '@coreui/react/src/components/header/CHeaderToggler'
PropertyDescriptionTypeDefault
classNameA string of all className you want applied to the base component.string-