React Header Component

Documentation and examples for the Header powerful, responsive navigation header. Includes support for branding, links, dropdowns, and more.

Other frameworks

CoreUI components are available as native Angular, Bootstrap (Vanilla JS), and Vue components. To learn more please visit the following pages.

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#

const [visible, setVisible] = useState(false)
return (
<>
<CHeader>
<CContainer fluid>
<CHeaderBrand href="#">Header</CHeaderBrand>
<CHeaderToggler onClick={() => setVisible(!visible)} />
<CCollapse className="header-collapse" visible={visible}>
<CHeaderNav>
<CNavItem>
<CNavLink href="#" active>
Home
</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#">Link</CNavLink>
</CNavItem>
<CDropdown variant="nav-item">
<CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownDivider />
<CDropdownItem href="#">Something else here</CDropdownItem>
</CDropdownMenu>
</CDropdown>
<CNavItem>
<CNavLink href="#" disabled>
Disabled
</CNavLink>
</CNavItem>
</CHeaderNav>
<CForm className="d-flex">
<CFormInput className="me-2" type="search" placeholder="Search" />
<CButton type="submit" color="success" variant="outline">
Search
</CButton>
</CForm>
</CCollapse>
</CContainer>
</CHeader>
</>
)

Customizing#

CSS variables#

React headers use local CSS variables on .header for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.

--cui-header-min-height: #{$header-min-height};
--cui-header-padding-x: #{$header-padding-x};
--cui-header-padding-y: #{$header-padding-y};
--cui-header-bg: #{$header-bg};
--cui-header-color: #{$header-color};
--cui-header-border-color: #{$header-border-color};
--cui-header-border: #{$header-border-width} solid var(--cui-header-border-color);
--cui-header-hover-color: #{$header-hover-color};
--cui-header-disabled-color: #{$header-disabled-color};
--cui-header-active-color: #{$header-active-color};
--cui-header-brand-padding-y: #{$header-brand-padding-y};
--cui-header-brand-color: #{$header-brand-color};
--cui-header-brand-hover-color: #{$header-brand-hover-color};
--cui-header-toggler-padding-x: #{$header-toggler-padding-x};
--cui-header-toggler-padding-y: #{$header-toggler-padding-y};
--cui-header-toggler-bg: #{$header-toggler-bg};
--cui-header-toggler-color: #{$header-toggler-color};
--cui-header-toggler-border-radius: #{$header-toggler-border-radius};
--cui-header-toggler-hover-color: #{$header-toggler-hover-color};
--cui-header-toggler-icon-bg: #{escape-svg($header-toggler-icon-bg)};
--cui-header-toggler-hover-icon-bg: #{escape-svg($header-toggler-hover-icon-bg)};
--cui-header-nav-link-padding-x: #{$header-nav-link-padding-x};
--cui-header-nav-link-padding-y: #{$header-nav-link-padding-y};
--cui-header-divider-border-color: #{$header-divider-border-color};
--cui-header-divider-border: #{$header-divider-border-width} solid var(--cui-header-divider-border-color);
--cui-subheader-min-height: #{$subheader-min-height};

How to use CSS variables#

const vars = {
'--my-css-var': 10,
'--my-another-css-var': "red"
}
return <CHeader style={vars}>...</CHeader>

SASS variables#

$header-min-height: 4rem !default;
$header-padding-y: $spacer * .5 !default;
$header-padding-x: $spacer * .5 !default;
$header-brand-font-size: $font-size-lg !default;
$header-color: rgba(var(--cui-emphasis-color-rgb), .65) !default;
$header-bg: var(--cui-body-bg) !default;
$header-border-color: var(--cui-border-color) !default;
$header-border-width: var(--cui-border-width) !default;
$header-hover-color: rgba(var(--cui-emphasis-color-rgb), .8) !default;
$header-active-color: rgba(var(--cui-emphasis-color-rgb), 1) !default;
$header-disabled-color: rgba(var(--cui-emphasis-color-rgb), .3) !default;
// Compute the header-brand padding-y so the header-brand will have the same height as header-text and nav-link
$nav-link-height: $font-size-base * $line-height-base + $nav-link-padding-y * 2 !default;
$header-brand-height: $header-brand-font-size * $line-height-base !default;
$header-brand-padding-y: ($nav-link-height - $header-brand-height) * .5 !default;
$header-brand-margin-end: 1rem !default;
$header-brand-font-size: $font-size-lg !default;
$header-brand-color: $gray-900 !default;
$header-brand-hover-color: shade-color($gray-900, 10%) !default;
$header-toggler-padding-y: .25rem !default;
$header-toggler-padding-x: .75rem !default;
$header-toggler-font-size: $font-size-lg !default;
$header-toggler-color: rgba(var(--cui-emphasis-color-rgb), .65) !default;
$header-toggler-bg: transparent !default;
$header-toggler-border-radius: $btn-border-radius !default;
$header-toggler-hover-color: rgba(var(--cui-emphasis-color-rgb), 1) !default;
$header-toggler-icon-color: currentColor !default; // stylelint-disable-line value-keyword-case
$header-toggler-icon-bg: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$header-toggler-icon-color}' stroke-width='2.25' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !default;
$header-toggler-hover-icon-color: currentColor !default; // stylelint-disable-line value-keyword-case
$header-toggler-hover-icon-bg: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$header-toggler-hover-icon-color}' stroke-width='2.25' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !default;
$header-nav-link-padding-x: .5rem !default;
$header-nav-link-padding-y: .5rem !default;
$header-divider-border-width: var(--cui-border-width) !default;
$header-divider-border-color: var(--cui-border-color) !default;

API#

CHeader#

import { CHeader } from '@coreui/react'
// or
import 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#

import { CHeaderBrand } from '@coreui/react'
// or
import 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>-
hrefThe href attribute specifies the URL of the page the link goes to.string-

CHeaderDivider#

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

CHeaderNav#

import { CHeaderNav } from '@coreui/react'
// or
import 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#

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

CHeaderToggler#

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