Bootstrap 5 Header
Header
Documentation and examples for CoreUI’s powerful, responsive header. Includes support for branding, navigation, and more.
🤖 Looking for the LLM-optimized version?View llm.md
Other frameworks
CoreUI components are available as native Angular, React, and Vue components. To learn more please visit the following pages.
How it works
Here’s what you need to know before getting started with the header component:
- Headers and their contents are fluid by default. Useoptional containers to limit their horizontal width.
- Use ourspacing andflex utility classes for controlling spacing and alignment within headers.
- Headers are responsive by default, but you can easily modify them to change that. Responsive behavior depends on our Collapse JavaScript plugin.
- Headers are hidden by default when printing. Force them to be printed by adding
.d-printto the.header. See thedisplay utility class. - Ensure accessibility by using a
<header>element or, if using a more generic element such as a<div>, add arole="navigation"to every header to explicitly identify it as a landmark region for users of assistive technologies.
prefers-reduced-motion media query. For more information, refer to thereduced motion section of our accessibility documentation.Read on for an example and list of supported sub-components.
Supported content
Headers come with built-in support for a handful of sub-components. Choose from the following as needed:
.header-brandfor your company, product, or project name..header-navfor a full-height and lightweight navigation (including support for dropdowns)..header-togglerfor use with our collapse plugin and othernavigation toggling behaviors..header-textfor adding vertically centered strings of text.
Here’s an example of all the sub-components included in a responsive header.
<headerclass="header"><aclass="header-brand"href="#"><imgsrc="/assets/brand/coreui-signet.svg"alt=""width="22"height="24"class="d-inline-block align-top"alt="CoreUI Logo"> CoreUI</a><buttonclass="header-toggler"type="button"><spanclass="header-toggler-icon"></span></button><ulclass="header-nav mr-auto"><liclass="nav-item active"><aclass="nav-link"href="#">Home<spanclass="visually-hidden">(current)</span></a></li><liclass="nav-item"><aclass="nav-link"href="#">Link</a></li><liclass="nav-item dropdown"><aclass="nav-link dropdown-toggle"href="#"id="headerDropdown"role="button"data-coreui-toggle="dropdown"aria-expanded="false"> Dropdown</a><divclass="dropdown-menu"aria-labelledby="headerDropdown"><aclass="dropdown-item"href="#">Action</a><aclass="dropdown-item"href="#">Another action</a><divclass="dropdown-divider"></div><aclass="dropdown-item"href="#">Something else here</a></div></li><liclass="nav-item"><aclass="nav-link disabled"href="#"tabindex="-1"aria-disabled="true">Disabled</a></li></ul><formclass="d-flex"><inputclass="form-control me-2"type="search"placeholder="Search"aria-label="Search"><buttonclass="btn btn-outline-success"type="submit">Search</button></form></header>This example usescolor (bg-light) andspacing (my-2,my-lg-0,mr-sm-0,my-sm-0) utility classes.
Brand
The.header-brand can be applied to most elements, but an anchor works best as some elements might require utility classes or custom styles.
<!-- As a link --><headerclass="header"><aclass="header-brand"href="#">CoreUI</a></header><!-- As a heading --><headerclass="header"><spanclass="header-brand mb-0 h1">Header</span></header>Adding images to the.header-brand will likely always require custom styles or utilities to properly size. Here are some examples to demonstrate.
<!-- Just an image --><headerclass="header"><aclass="header-brand"href="#"><imgsrc="/assets/brand/coreui-signet.svg"alt=""width="22"height="24"alt="CoreUI Logo"></a></header><!-- Image and text --><headerclass="header"><aclass="header-brand"href="#"><imgsrc="/assets/brand/coreui-signet.svg"alt=""width="22"height="24"class="d-inline-block align-top"alt="CoreUI Logo"> CoreUI</a></header>Nav
Header navigation links build on our.header-nav.
Active states—with.active—to indicate the current page can be applied directly to.nav-links or their immediate parent.nav-items.
<headerclass="header"><aclass="header-brand"href="#">CoreUI</a><ulclass="header-nav"><liclass="nav-item active"><aclass="nav-link"href="#">Home<spanclass="visually-hidden">(current)</span></a></li><liclass="nav-item"><aclass="nav-link"href="#">Features</a></li><liclass="nav-item"><aclass="nav-link"href="#">Pricing</a></li><liclass="nav-item"><aclass="nav-link disabled"href="#"tabindex="-1"aria-disabled="true">Disabled</a></li></ul></header>And because we use classes for our navs, you can avoid the list-based approach entirely if you like.
<headerclass="header"><aclass="header-brand"href="#">CoreUI</a><divclass="header-nav"><aclass="nav-item nav-link active"href="#">Home<spanclass="visually-hidden">(current)</span></a><aclass="nav-item nav-link"href="#">Features</a><aclass="nav-item nav-link"href="#">Pricing</a><aclass="nav-item nav-link disabled"href="#"tabindex="-1"aria-disabled="true">Disabled</a></div></header>You may also utilize dropdowns in your header nav. Dropdown menus require a wrapping element for positioning, so be sure to use separate and nested elements for.nav-item and.nav-link as shown below.
<headerclass="header"><aclass="header-brand"href="#">CoreUI</a><ulclass="header-nav"><liclass="nav-item active"><aclass="nav-link"href="#">Home<spanclass="visually-hidden">(current)</span></a></li><liclass="nav-item"><aclass="nav-link"href="#">Features</a></li><liclass="nav-item"><aclass="nav-link"href="#">Pricing</a></li><liclass="nav-item dropdown"><aclass="nav-link dropdown-toggle"href="#"id="headerDropdownMenuLink"role="button"data-coreui-toggle="dropdown"aria-expanded="false"> Dropdown link</a><divclass="dropdown-menu"aria-labelledby="headerDropdownMenuLink"><aclass="dropdown-item"href="#">Action</a><aclass="dropdown-item"href="#">Another action</a><aclass="dropdown-item"href="#">Something else here</a></div></li></ul></header>Forms
Place various form controls and components within a header with.d-flex.
<headerclass="header"><formclass="d-flex"><inputclass="form-control me-2"type="search"placeholder="Search"aria-label="Search"><buttonclass="btn btn-outline-success"type="submit">Search</button></form></header>Immediate children elements in.header use flex layout and will default tojustify-content: between. Use additionalflex utilities as needed to adjust this behavior.
<headerclass="header"><aclass="header-brand">Header</a><formclass="d-flex"><inputclass="form-control me-2"type="search"placeholder="Search"aria-label="Search"><buttonclass="btn btn-outline-success"type="submit">Search</button></form></header>Input groups work, too:
<headerclass="header"><formclass="d-flex"><divclass="input-group"><divclass="input-group-prepend"><spanclass="input-group-text"id="basic-addon1">@</span></div><inputtype="text"class="form-control"placeholder="Username"aria-label="Username"aria-describedby="basic-addon1"></div></form></header>Various buttons are supported as part of these header forms, too. This is also a great reminder that vertical alignment utilities can be used to align different sized elements.
<headerclass="header"><formclass="d-flex"><buttonclass="btn btn-outline-success"type="button">Main button</button><buttonclass="btn btn-sm btn-outline-secondary"type="button">Smaller button</button></form></header>Text
Headers may contain bits of text with the help of.header-text. This class adjusts vertical alignment and horizontal spacing for strings of text.
<headerclass="header"><spanclass="header-text"> Header text with an inline element</span></header>Containers
Although it’s not required, you can wrap a header in a.container to center it on a page or add one within to only center the contents of afixed or static top header.
<divclass="container"><headerclass="header"><aclass="header-brand"href="#">CoreUI</a></header></div>When the container is within your header, its horizontal padding is removed at breakpoints lower than your specified.header-expand{-sm|-md|-lg|-xl} class. This ensures we’re not doubling up on padding unnecessarily on lower viewports when your header is collapsed.
<headerclass="header"><divclass="container"><aclass="header-brand"href="#">CoreUI</a></div></header>Customizing
CSS variables
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-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}solidvar(--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-transition:#{$header-transition};--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}solidvar(--cui-header-divider-border-color);SASS variables
$header-padding-y:$spacer*.5;$header-padding-x:$spacer*.5;$header-brand-font-size:$font-size-lg;$header-color:rgba(var(--#{$prefix}emphasis-color-rgb),.65);$header-bg:var(--#{$prefix}body-bg);$header-border-color:var(--#{$prefix}border-color);$header-border-width:var(--#{$prefix}border-width);$header-hover-color:rgba(var(--#{$prefix}emphasis-color-rgb),.8);$header-active-color:rgba(var(--#{$prefix}emphasis-color-rgb),1);$header-disabled-color:rgba(var(--#{$prefix}emphasis-color-rgb),.3);$header-transition:box-shadow.15sease-in-out;// 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;$header-brand-height:$header-brand-font-size*$line-height-base;$header-brand-padding-y:($nav-link-height-$header-brand-height)*.5;$header-brand-margin-end:1rem;$header-brand-font-size:$font-size-lg;$header-brand-color:$gray-900;$header-brand-hover-color:shade-color($gray-900,10%);$header-toggler-padding-y:.25rem;$header-toggler-padding-x:.75rem;$header-toggler-font-size:$font-size-lg;$header-toggler-color:rgba(var(--#{$prefix}emphasis-color-rgb),.65);$header-toggler-bg:transparent;$header-toggler-border-radius:$btn-border-radius;$header-toggler-hover-color:rgba(var(--#{$prefix}emphasis-color-rgb),1);$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");$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");$header-nav-link-padding-x:.5rem;$header-nav-link-padding-y:.5rem;$header-divider-border-width:var(--#{$prefix}border-width);$header-divider-border-color:var(--#{$prefix}border-color);