CoreUI for Vue.js logo
Angular JavaScript / Vanilla JS React.js
  • undefinedGetting started
  • undefinedLayout
  • undefinedForms
  • undefinedComponents
  • undefinedMigration
If you like this project and want to help us, please give us a star ⭐️ on Github. ➡️ undefined Star🙏
  • undefined
  • undefined

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

API #

CHeader #

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

Props #

Prop nameDescriptionTypeValuesDefault
containerDefines optional container wrapping children elements.boolean|stringboolean, 'sm', 'md', 'lg', 'xl', 'xxl', 'fluid'-
positionPlace header in non-static positions.string'fixed', 'sticky'-

CHeaderBrand #

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

Props #

Prop nameDescriptionTypeValuesDefault
componentComponent 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'
1
2
3

Props #

Prop nameDescriptionTypeValuesDefault
componentComponent used for the root node. Either a string to use a HTML element or a component.string-'ul'
On this page
  • Example
  • Supported content
  • API
    • CHeader
    • CHeaderBrand
    • CHeaderNav
  • GitHub
  • Twitter
  • CoreUI (Vanilla)
  • CoreUI for Angular
  • CoreUI for React.js

CoreUI for Vue is Open Source UI Components Library for Vue.js.

Code licensed MIT , docs CC BY 3.0 .