Vue 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 React components. To learn more please visit the following pages.

Example

Here's what you need to know before getting started with the header:

Headers require a wrapping .header with .header-expand{-sm|-md|-lg|-xl|-xxl} for responsive collapsing and color scheme classes.
Headers and their contents are fluid by default. Change the container to limit their horizontal width in different ways.
Use our spacing and 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.
Ensure accessibility by using a <nav> 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.
Indicate the current item by using aria-current="page" for the current page or aria-current="true" for the current item in a set.

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 class="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.

<CHeader>
  <CContainer fluid>
    <CHeaderBrand href="#">Header</CHeaderBrand>
    <CHeaderToggler @click="visible = !visible" />
    <CCollapse class="header-collapse" :visible="visible">
      <CHeaderNav>
        <CNavItem>
          <CNavLink href="#" active>
            Home
          </CNavLink>
        </CNavItem>
        <CNavItem>
          <CNavLink href="#">Link</CNavLink>
        </CNavItem>
        <CDropdown togglerText="Dropdown" variant="nav-item">
          <CDropdownItem href="#">Action</CDropdownItem>
          <CDropdownItem href="#">Another action</CDropdownItem>
          <CDropdownItem href="#">Something else here</CDropdownItem>
        </CDropdown>
        <CNavItem>
          <CNavLink href="#" disabled>
            Disabled
          </CNavLink>
        </CNavItem>
      </CHeaderNav>
      <!-- <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form> -->
    </CCollapse>
  </CContainer>
</CHeader>
<script>
  export default {
    data() {
      return { 
        visible: false,
      }
    }
  }
</script>

Customizing

CSS variables

Vue 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:                  $medium-emphasis !default;
$header-bg:                     $white !default;
$header-border-color:           $border-color !default;
$header-border-width:           1px !default;
$header-hover-color:            $high-emphasis !default;
$header-active-color:           $high-emphasis !default;
$header-disabled-color:         $disabled !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:          $header-color !default;
$header-toggler-bg:             transparent !default;
$header-toggler-border-radius:  $btn-border-radius !default;
$header-toggler-hover-color:    $header-active-color !default;

$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") !default;
$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") !default;

$header-nav-link-padding-x:     .5rem !default;
$header-nav-link-padding-y:     .5rem !default;

$header-divider-border-width:   1px !default;
$header-divider-border-color:   $header-border-color !default;

API

CHeader

import { CHeader } from '@coreui/vue'
// or
import CHeader from '@coreui/vue/src/components/header/CHeader'

Props

Prop name	Description	Type	Values	Default
container	Defines optional container wrapping children elements.	boolean\|string	`boolean`, `'sm'`, `'md'`, `'lg'`, `'xl'`, `'xxl'`, `'fluid'`	-
position	Place header in non-static positions.	string	`'fixed'`, `'sticky'`	-

CHeaderBrand

import { CHeaderBrand } from '@coreui/vue'
// or
import CHeaderBrand from '@coreui/vue/src/components/header/CHeaderBrand'

Props

Prop name	Description	Type	Values	Default
component	Component used for the root node. Either a string to use a HTML element or a component.	string	-	'a'

CHeaderNav

import { CHeaderNav } from '@coreui/vue'
// or
import CHeaderNav from '@coreui/vue/src/components/header/CHeaderNav'

Props

Prop name	Description	Type	Values	Default
component	Component used for the root node. Either a string to use a HTML element or a component.	string	-	'ul'

On this page

Vue Header Component

Other frameworks

Example #

Supported content #

Customizing #

CSS variables #

How to use CSS variables #

SASS variables #

API #

CHeader #

Props #

CHeaderBrand #

Props #

CHeaderNav #

Props #

Example

Supported content

Customizing

CSS variables

How to use CSS variables

SASS variables

API

CHeader

Props

CHeaderBrand

Props

CHeaderNav

Props