header.md

layout	title	description	group	aliases	toc	bootstrap	other_frameworks
docs	Header	Documentation and examples for CoreUI's powerful, responsive header. Includes support for branding, navigation, and more.	components	/4.0/components/header/ /4.1/components/header/	true	true	header

<style> .cd-example .header:not(:last-child) { margin-bottom: 20px; } </style>

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. Use optional containers to limit their horizontal width.
• Use our [spacing]({{< docsref "/utilities/spacing" >}}) and [flex]({{< docsref "/utilities/flex" >}}) 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-print to the .header. See the [display]({{< docsref "/utilities/display" >}}) utility class.
• Ensure accessibility by using a <header> element or, if using a more generic element such as a <div>, add a role="navigation" to every header to explicitly identify it as a landmark region for users of assistive technologies.

{{< callout info >}} {{< partial "callouts/info-prefersreducedmotion.md" >}} {{< /callout >}}

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-brand for your company, product, or project name.
• .header-nav for a full-height and lightweight navigation (including support for dropdowns).
• .header-toggler for use with our collapse plugin and other navigation toggling behaviors.
• .header-text for adding vertically centered strings of text.

Here's an example of all the sub-components included in a responsive header.

{{< example >}}

CoreUI

• Home (current)
• Link
• Dropdown
  Action Another action

  Something else here
• Disabled

Search {{< /example >}}

This example uses [color]({{< docsref "/utilities/colors" >}}) (bg-light) and [spacing]({{< docsref "/utilities/spacing" >}}) (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.

{{< example >}}

CoreUI Header {{< /example >}}

Adding images to the .header-brand will likely always require custom styles or utilities to properly size. Here are some examples to demonstrate.

{{< example >}}

{{< /example >}}

{{< example >}}

CoreUI {{< /example >}}

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.

{{< example >}}

CoreUI

• Home (current)
• Features
• Pricing
• Disabled

{{< /example >}}

And because we use classes for our navs, you can avoid the list-based approach entirely if you like.

{{< example >}}

CoreUI

Home (current) Features Pricing Disabled

{{< /example >}}

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.

{{< example >}}

CoreUI

• Home (current)
• Features
• Pricing
• Dropdown link
  Action Another action Something else here

{{< /example >}}

Forms

Place various form controls and components within a header with .d-flex.

{{< example >}}

Search {{< /example >}}

Immediate children elements in .header use flex layout and will default to justify-content: between. Use additional [flex utilities]({{< docsref "/utilities/flex" >}}) as needed to adjust this behavior.

{{< example >}}

Header Search {{< /example >}}

Input groups work, too:

{{< example >}}

@

{{< /example >}}

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.

{{< example >}}

Main button Smaller button {{< /example >}}

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.

{{< example >}}

Header text with an inline element {{< /example >}}

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 a fixed or static top header.

{{< example >}}

CoreUI

{{< /example >}}

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.

{{< example >}}

CoreUI

{{< /example >}}

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.

{{< scss-docs name="header-css-vars" file="scss/_header.scss" >}}

SASS variables

{{< scss-docs name="header-variables" file="scss/_variables.scss" >}}