docs
TYPO3 v14
Content  /  Navigation

14 — Navigation

Five desktop variants, three mobile ones, chosen per site. Only the selected pair is compiled into the stylesheet.

Choosing a variant

Yavi Theme → Navigation → Variants — every setting named in this chapter is on that one page, see 08b — The Navigation page:

SettingValues
Navigation Art DesktopMainNavigation · SplitedNavigation · HamburgerNavigation · HamburgerD2 · HamburgerD3
Navigation Art MobileBottomSheetNavigation · OrbitFabNavigation · NavigationN4
i
Flush the cache after changing this. Each variant brings its own markup and its own stylesheet, and only the selected one is compiled. Without a flush the page uses the new markup with the old CSS.

The breakpoint between desktop and mobile is 992px.

The desktop variants

A normal dropdown of MainNavigation
A normal dropdown of MainNavigation
VariantCharacterGood for
MainNavigationClassic bar: logo left, menu right, dropdowns and mega menuMost business sites
SplitedNavigationMenu split around a centred logoBrands whose logo is the anchor
HamburgerNavigationHamburger only, full-screen overlayPortfolio and campaign sites
HamburgerD2Hamburger with a typographic stageEditorial sites
HamburgerD3Hamburger with an index railSites with few, strong sections

The mobile variants

The mobile header at 390px
The mobile header at 390px
VariantCharacter
BottomSheetNavigationA sheet sliding up from the bottom — thumb-friendly
OrbitFabNavigationFloating action button with entries arranged around it
NavigationN4Split reveal

Mega menu

The mega menu open, hovering a top-level entry
The mega menu open, hovering a top-level entry

Available in MainNavigation and SplitedNavigation. Per page, in the page properties:

FieldWhat it does
MegamenuTurns the mega menu on for this page's subtree
Megamenu ColumnsAutomatic (2, or 3 above 10 entries), 2 or 3
Megamenu ThumbnailPreview image inside the panel
Megamenu Title / TextTeaser text inside the panel
Megamenu LinkThe panel's own link
The mega menu fields live in the page properties, not in the module
The mega menu fields live in the page properties, not in the module

Highlighted menu entry

A page can be shown as a button in the navigation — page properties → Navimenu as Button. Use it for one entry, not five.

Sizes and shapes

Proportions are on Yavi Theme → Navigation → Sizes & rounding:

FieldMeaning
Navbar heightHeader height at the top
Navbar height (scrolled)Height after scrolling
Dropdown & mega menu roundingCorners of everything that opens out of the bar
Navigation buttons & pills roundingCorners of the controls in the bar

Behaviour flags are one tab further left, under Behaviour: fixed header, shrink on scroll, full-width navigation.

The logo heights are the one thing that is not here — they are on Layout → Logo, together with the logo files and the footer sizes.

What travels with the theme

The eight variants live in yavi_core and are imported by an interpolated path (Skin/Navigation/#{$navigationart}). A theme therefore cannot own a variant file — instead it shapes the navigation through:

  1. Navigation tokens — --nav-menu-bg, --nav-menu-fg, --nav-link-…, --nav-pill-radius, --nav-panel-radius and friends.
  2. Skin/navigation.scss in the theme, which is loaded after the variant.

That is the seam to use when a theme's dropdown must look different from the variant's default. See 15 — Theming.

Language menu

Multi-language sites get a language pill in the bar with a dropdown, and on mobile a sheet sliding in from the bottom. Its corners follow the same two rounding fields as the rest of the navigation.

Turn it on under Navigation → Language & search and set the Search results page. The theme renders the field and submits by GET; the results page needs a search plugin. Without a target page the request goes to the current page — the quietest possible failure, so set it.