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 π
<Header />
<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 π
<!-- Primary navigation, center align -->
<Header navPosition="center" />
<!-- Primary navigation, right align -->
<Header navPosition="right" />
<!-- Primary navigation, center align -->
<c-header nav-position="center" />
<!-- Primary navigation, right align -->
<c-header nav-position="right" />
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 π
<!-- Hide both primary and secondary navigation -->
<Header hideNav />
<!-- Hide the secondary navigation only -->
<Header hideSignin />
<!-- 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 π
<Header bottomDivider />
<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 π
<Header bottomOuterDivider />
<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 | – |
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