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 arole="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 oraria-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' |