Skip to main content

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