Vue Header Component

Documentation and examples for the Header powerful, responsive navigation header. Includes support for branding, links, dropdowns, and more.

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.

Header

• Home
• Link
Dropdown button
ActionAnother action
---
Something else here
• Disabled

<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: true,
      }
    }
  }
</script>

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'