Header Layouts

Examples for Space's powerful, responsive navigation header, the navbar.

Headers

Header title	Link
Default (Fullwidth)	Open Demo
Default (Fullwidth) - Borderless	Open Demo
Default Container	Open Demo
Classic (Fullwidth)	Open Demo
Classic	Open Demo
No navbar	Open Demo

Header - Alignments

Header title	Link
Left	Open Demo
Right	Open Demo

Header - Events

Header title	Link
Hover	Open Demo
Click	Open Demo

Header default - Absolute top

Header title	Link
Default	Open Demo
Breakpoint-sm	Open Demo
Breakpoint-md	Open Demo
Breakpoint-lg	Open Demo
Breakpoint-xl	Open Demo

Header default - Absolute bottom

Header title	Link
Default	Open Demo
Breakpoint-sm	Open Demo
Breakpoint-md	Open Demo
Breakpoint-lg	Open Demo
Breakpoint-xl	Open Demo

Header default - Second screen

Header title	Link
Default	Open Demo
Breakpoint-sm	Open Demo
Breakpoint-md	Open Demo
Breakpoint-lg	Open Demo
Breakpoint-xl	Open Demo

Header default - Sticky top

Header title	Link
Default	Open Demo
Breakpoint-sm	Open Demo
Breakpoint-md	Open Demo
Breakpoint-lg	Open Demo
Breakpoint-xl	Open Demo

Header default - Sticky bottom

Header title	Link
Default	Open Demo
Breakpoint-sm	Open Demo
Breakpoint-md	Open Demo
Breakpoint-lg	Open Demo
Breakpoint-xl	Open Demo

Header default - Toggle style

Header title	Link
Default	Open Demo
Breakpoint-sm	Open Demo
Breakpoint-md	Open Demo
Breakpoint-lg	Open Demo
Breakpoint-xl	Open Demo

Header default - Floating

Header title	Link
Default	Open Demo
Breakpoint-sm	Open Demo
Breakpoint-md	Open Demo
Breakpoint-lg	Open Demo
Breakpoint-xl	Open Demo

Header - OnScroll behavior

Header title	Link
Changing logo on scroll	Open Demo

Header default - Transparent

Header title	Link
Default	Open Demo
Borderless	Open Demo

Header default - Color schemes

Header title	Link
Dark	Open Demo
Navbar primary	Open Demo
Navbar dark	Open Demo
Submenu dark	Open Demo

Header default - One-page navigation

Header title	Link
Navbar Default	Open Demo
With dropdown	Open Demo
With dropdown (links)	Open Demo

Account

Header title	Link
Modal window signin	Open Demo
Link	Open Demo
User Profile	Open Demo
User with Dropdown	Open Demo

Shopping cart

Header title	Link
Empty dropdown	Open Demo
Dropdown with items	Open Demo
Link	Open Demo
Empty modal window	Open Demo
Modal window with items	Open Demo