If you like this project and want to help us, please give us a star ⭐️ on Github. ➡️Star🙏

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'

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'`	-

CHeaderBrand#

1import { CHeaderBrand } from '@coreui/react'
2// or
3import 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>`	-

CHeaderDivider#

1import { CHeaderDivider } from '@coreui/react'
2// or
3import 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`	-

CHeaderNav#

1import { CHeaderNav } from '@coreui/react'
2// or
3import 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>`	-

CHeaderText#

1import { CHeaderText } from '@coreui/react'
2// or
3import 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`	-

CHeaderToggler#

1import { CHeaderToggler } from '@coreui/react'
2// or
3import 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`	-

On this page

CoreUI for React is Open Source UI Components Library for React.js.

Code licensed MIT, docs CC BY 3.0.