Support CoreUI Development

CoreUI is an MIT-licensed open source project and is completely free to use. However, the amount of effort needed to maintain and develop new features for the project is not sustainable without proper financial backing.

You can support our Open Source software development in the following ways:

Buy the CoreUI PRO, and get access to PRO components, and dedicated support.
Became a sponsor, and get your logo on BACKERS.md/README.md files or each site of this documentation
Give us a star ⭐️ on Github.

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)

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.

1--cui-header-min-height: #{$header-min-height};
2--cui-header-padding-x: #{$header-padding-x};
3--cui-header-padding-y: #{$header-padding-y};
4--cui-header-bg: #{$header-bg};
5--cui-header-color: #{$header-color};
6--cui-header-border-color: #{$header-border-color};
7--cui-header-border: #{$header-border-width} solid var(--cui-header-border-color);
8--cui-header-hover-color: #{$header-hover-color};
9--cui-header-disabled-color: #{$header-disabled-color};
10--cui-header-active-color: #{$header-active-color};
11--cui-header-brand-padding-y: #{$header-brand-padding-y};
12--cui-header-brand-color: #{$header-brand-color};
13--cui-header-brand-hover-color: #{$header-brand-hover-color};
14--cui-header-toggler-padding-x: #{$header-toggler-padding-x};
15--cui-header-toggler-padding-y: #{$header-toggler-padding-y};
16--cui-header-toggler-bg: #{$header-toggler-bg};
17--cui-header-toggler-color: #{$header-toggler-color};
18--cui-header-toggler-border-radius: #{$header-toggler-border-radius};
19--cui-header-toggler-hover-color: #{$header-toggler-hover-color};
20--cui-header-toggler-icon-bg: #{escape-svg($header-toggler-icon-bg)};
21--cui-header-toggler-hover-icon-bg: #{escape-svg($header-toggler-hover-icon-bg)};
22--cui-header-nav-link-padding-x: #{$header-nav-link-padding-x};
23--cui-header-nav-link-padding-y: #{$header-nav-link-padding-y};
24--cui-header-divider-border-color: #{$header-divider-border-color};
25--cui-header-divider-border: #{$header-divider-border-width} solid var(--cui-header-divider-border-color);
26--cui-subheader-min-height: #{$subheader-min-height};

How to use CSS variables#

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

SASS variables#

1$header-min-height:             4rem;
2$header-padding-y:              $spacer * .5;
3$header-padding-x:              $spacer * .5;
4$header-brand-font-size:        $font-size-lg;
5$header-color:                  $medium-emphasis;
6$header-bg:                     $white;
7$header-border-color:           $border-color;
8$header-border-width:           1px;
9$header-hover-color:            $high-emphasis;
10$header-active-color:           $high-emphasis;
11$header-disabled-color:         $disabled;
12
13// Compute the header-brand padding-y so the header-brand will have the same height as header-text and nav-link
14$nav-link-height:               $font-size-base * $line-height-base + $nav-link-padding-y * 2;
15$header-brand-height:           $header-brand-font-size * $line-height-base;
16$header-brand-padding-y:        ($nav-link-height - $header-brand-height) * .5;
17$header-brand-margin-end:       1rem;
18$header-brand-font-size:        $font-size-lg;
19$header-brand-color:            $gray-900;
20$header-brand-hover-color:      shade-color($gray-900, 10%);
21
22$header-toggler-padding-y:      .25rem;
23$header-toggler-padding-x:      .75rem;
24$header-toggler-font-size:      $font-size-lg;
25$header-toggler-color:          $header-color;
26$header-toggler-bg:             transparent;
27$header-toggler-border-radius:  $btn-border-radius;
28$header-toggler-hover-color:    $header-active-color;
29
30$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-color}' stroke-width='2.25' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
31$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-hover-color}' stroke-width='2.25' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
32
33$header-nav-link-padding-x:     .5rem;
34$header-nav-link-padding-y:     .5rem;
35
36$header-divider-border-width:   1px;
37$header-divider-border-color:   $header-border-color;

API#

CHeader#

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