A lightweight, responsive header component used for showcasing hero unit style content.


Here’s an example of the basic components included in a <i-navbar> that automatically collapses responsively.

Header Example


You're able to use the size modifier to control the size of your header, using one of the available sizes: sm, md, and lg. The default size is set to md.

Header Small Size
Header Medium Size
Header Large Size


You can make headers cover the whole screen width and height (using vw and vh) by adding the fullscreen property. The width and height do not overflow the size of the parent container.

Fullescreen Header

Cover Background

The goal of cover background images on a website is to cover the entire browser window at all times. Simply set a background for the header

Header Cover Background

Component API

Here you can find a list of the various customization options you can use for the header component as props, as well as available slots.

Header API

Sass Variables

Here you can find a list of the Sass variables you can use for the header components. If you're looking to find common variables that these rely on, you should take a look at the Sass Variables page.