Skip to main content Skip to page footer

Navigations

The theme ships five desktop and three mobile navigations. Which one runs is decided per site – each variant brings its own markup and its own stylesheet, and only the selected one is compiled. That is why every tile below is a page of its own.

Desktop – 5 variants

Every frame is a real, clickable page at 1280 px wide. Scroll inside a frame to see the header shrink.

DefaultMainNavigationopen full page ↗Logo left, menu right, sub-menus as dropdowns. The header shrinks once the page is scrolled.
SplitedSplitedNavigationopen full page ↗The menu splits to the left and right of a centred logo – calm and symmetrical.
HamburgerHamburgerNavigationopen full page ↗One menu button even on desktop; the navigation opens as a full-screen overlay.
Hamburger D2 · Typo-StageHamburgerD2open full page ↗Overlay with the menu items as oversized type that flies forward on hover.
Hamburger D3 · Index-RailHamburgerD3open full page ↗Overlay with a numbered index rail – reads like a table of contents.

Mobile – 3 variants

The same pages at 390 px wide. Media queries follow the frame width, so this is the real mobile navigation – tap the menu button.

Bottom SheetBottomSheetNavigationopen full page ↗Slides up from the bottom, where the thumb is.
Orbit FABOrbitFabNavigationopen full page ↗A floating button with the items arranged around it.
N4 Split-RevealNavigationN4open full page ↗The page splits apart and reveals the menu.