Headers

Documentation and examples for Bootstrap's powerful, responsive navigation header, the navbar.

Header #1

// import header from layouts
import NavbarMentorPages from 'layouts/marketing/navbars/NavbarMentorPages';

export const Header1Example = () => {
    return <NavbarMentorPages />
}

Header #2

Design

Code

// import header from layouts
import NavbarHelpCenter from 'layouts/marketing/navbars/help-center/NavbarHelpCenter';

export const Header2Example = () => {
    return <NavbarHelpCenter bg='white' />
}

Header #3

Design

Code

// import header from layouts
import NavbarJobPages from 'layouts/marketing/navbars/NavbarJobPages';

export const Header3Example = () => {
    return <NavbarJobPages />
}

Header #4

Design

Code

// import header from layouts
import NavbarDefault from 'layouts/marketing/navbars/NavbarDefault';

export const Header4Example = () => {
    return <NavbarDefault />
}

Header #5

Design

Code

// import header from layouts
import NavbarLanding from 'layouts/marketing/navbars/NavbarLanding';

export const Header5Example = () => {
    return  <NavbarLanding />
}

Header #6

Design

Code

// import header from layouts
import NavbarMegaMenu from 'layouts/marketing/navbars/mega-menu/NavbarMegaMenu';

export const Header6Example = () => {
    return <NavbarMegaMenu />
}

Header #7

Design

Code

// import header from layouts
import NavbarDefault from 'layouts/marketing/navbars/NavbarDefault';

export const Header7Example = () => {
    return <NavbarDefault login />
}

Header #8

Design

Code

// import header from layouts
import NavbarBoxCenterMenu from 'layouts/marketing/navbars/NavbarBoxCenterMenu';

export const Header8Example = () => {
    return <NavbarBoxCenterMenu />
}