Header

This part of the documentation relates to premium templates built with Cruip CSS framework only. If the template you are using is built on the top of Tailwind CSS, please refer to the last part of the documentation.

General information

The header is structured in this way 👇

<header class="site-header">
<div class="container">
<div class="site-header-inner">
<!-- Logo image or site name -->
<div class="brand">
<h1 class="m-0">
<a href="#">
<!-- Site name, or image (ideal size: 32x32px) -->
</a>
</h1>
</div>
<!-- Hamburger button for mobile -->
<button id="header-nav-toggle" class="header-nav-toggle" aria-controls="primary-menu" aria-expanded="false">
<span class="screen-reader">Menu</span>
<span class="hamburger">
<span class="hamburger-inner"></span>
</span>
</button>
<!-- Header navigation -->
<nav id="header-nav" class="header-nav">
<div class="header-nav-inner">
<!-- Primary navigation -->
<!-- It supports .header-nav-center and .header-nav-right classes -->
<ul class="list-reset text-xxs">
<li>
<a href="#">Header link</a>
</li>
</ul>
<!-- Secondary navigation (e.g. CTA buttons) -->
<ul class="list-reset header-nav-right">
<li>
<a class="button button-sm" href="#">Sign up</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</header>

In React and Vue, the header component is located into the /src/components/layout/ folder, and it can be imported/used in this way 👇

React
Vue
React
<Header />
Vue
<c-header />

Logo

For every templates we include a SVG logo (shipped in the /src/images/ folder), and the recommended size is 32x32px.

<img src="images/logo.svg" alt="Abstract" width="32" height="32">

In React and Vue, the logo is included as a partial file, and it's stored in the/src/components/layout/partials/ folder.

Navigation alignment

As shown in the example above, the header can have a primary navigation (for menu links), a secondary one (for buttons), or both.

The primary navigation is left-aligned by default. You can center align the content by adding the .header-nav-center class, or you even right align it by using the .header-nav-right class.

Normally, the secondary navigation is right-aligned by default, so it comes with the .header-nav-right class by default on the latter <ul> element.

<!-- Primary navigation, left align -->
<ul class="list-reset text-xxs">
<li>
<a href="#">Header link</a>
</li>
</ul>
​
<!-- Primary navigation, center align -->
<ul class="list-reset text-xxs header-nav-center">
<li>
<a href="#">Header link</a>
</li>
</ul>
​
<!-- Primary navigation, right align -->
<ul class="list-reset text-xxs header-nav-right">
<li>
<a href="#">Header link</a>
</li>
</ul>

You can use the navPosition (React) or nav-position (Vue) props on the header component to change the primary navigation alignment 👇

React
Vue
React
// Primary navigation, center align
<Header navPosition="center" />
​
// Primary navigation, right align
<Header navPosition="right" />
Vue
// Primary navigation, center align
<c-header nav-position="center" />
​
// Primary navigation, right align
<c-header nav-position="right" />

Header component comes with a bunch of options 👇

Hide navigation

While hiding primary and secondary navigation it's just a matter of deleting a few lines of code in the HTML template, in React and Vue we have provided a couple of options to speed up the process. Let's have a look at the example below 👇

React
Vue
React
// Hide both primary and secondary navigation
<Header hideNav />
​
// Hide the secondary navigation only
<Header hideSignin />
Vue
// Hide both primary and secondary navigation
<c-header hide-nav />
​
// Hide the secondary navigation only
<c-header hide-signin />

Bottom borders

If you want to display a border at the bottom of the header area, you can use the .has-bottom-divider helper class like in the example below 👇

<header class="site-header">
<div class="container">
<div class="site-header-inner has-bottom-divider">
<!-- header content -->
</div>
</div>
</header>

In React and Vue there is a prop for that 👇

React
Vue
React
<Header bottomDivider />
Vue
<c-header bottom-divider />

For a full-width divider, add the .has-bottom-divider class to the .site-header element 👇

<header class="site-header has-bottom-divider">
<div class="container">
<div class="site-header-inner">
<!-- header content -->
</div>
</div>
</header>

In React and Vue there is a prop for that 👇

React
Vue
React
<Header bottomOuterDivider />
Vue
<c-header bottom-outer-divider />

TL;DR

React props

Prop

Type

Default

Accepted values

navPosition

string

-

It's left by default, accepts center and right

hideNav

boolean

false

-

hideSignin

boolean

false

-

bottomOuterDivider

boolean

false

-

bottomDivider

boolean

false

-

Vue props

Prop

Type

Default

Accepted values

nav-position

string

-

It's left by default, accepts center and right

hide-nav

boolean

false

-

hide-signin

boolean

false

-

bottom-outer-divider

boolean

false

-

bottom-divider

boolean

false

-

In React and Vue, navigation links should be handled into to the header components.

Theming

Style is defined into 3 files:

📋 Core file

src/assets/scss/core/layout/_header.scss

👆🚫 Don't edit this file!

📋 Settings file

src/assets/scss/settings/layout/_header.scss

👆Use this to adjust Sass variables

📋 Theme file

src/assets/scss/theme/layout/_header.scss

👆Use this to add custom CSS

Learn more about the Sass logic behind each template.