Documentation and examples for the Header powerful, responsive navigation header. Includes support for branding, links, dropdowns, and more.
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.<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.
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 Home13 </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 Disabled30 </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 Search37 </CButton>38 </CForm>39 </CCollapse>40 </CContainer>41 </CHeader>42 </>43)
1import { CHeader } from '@coreui/react'2// or3import CHeader from '@coreui/react/src/components/header/CHeader'
Property | Description | Type | Default |
---|---|---|---|
className | A string of all className you want applied to the component. | string | - |
container | Defines optional container wrapping children elements. | boolean | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'fluid' | - |
position | Place header in non-static positions. | 'fixed' | 'sticky' | - |
1import { CHeaderBrand } from '@coreui/react'2// or3import CHeaderBrand from '@coreui/react/src/components/header/CHeaderBrand'
Property | Description | Type | Default |
---|---|---|---|
className | A string of all className you want applied to the component. | string | - |
component | Component used for the root node. Either a string to use a HTML element or a component. | string | ComponentClass<any, any> | FunctionComponent<any> | - |
1import { CHeaderDivider } from '@coreui/react'2// or3import CHeaderDivider from '@coreui/react/src/components/header/CHeaderDivider'
Property | Description | Type | Default |
---|---|---|---|
className | A string of all className you want applied to the component. | string | - |
1import { CHeaderNav } from '@coreui/react'2// or3import CHeaderNav from '@coreui/react/src/components/header/CHeaderNav'
Property | Description | Type | Default |
---|---|---|---|
className | A string of all className you want applied to the component. | string | - |
component | Component used for the root node. Either a string to use a HTML element or a component. | string | ComponentClass<any, any> | FunctionComponent<any> | - |
1import { CHeaderText } from '@coreui/react'2// or3import CHeaderText from '@coreui/react/src/components/header/CHeaderText'
Property | Description | Type | Default |
---|---|---|---|
className | A string of all className you want applied to the base component. | string | - |
1import { CHeaderToggler } from '@coreui/react'2// or3import CHeaderToggler from '@coreui/react/src/components/header/CHeaderToggler'
Property | Description | Type | Default |
---|---|---|---|
className | A string of all className you want applied to the base component. | string | - |