Navi Section

Figma Component: 9006-24685

GitHub Issue: #14

Last modified with commit 1014d24 on February 4, 2026 at 10:48 AM by Martin Jagodic.

Main navigation bar container for site header. Contains brand logo, website switcher dropdown (optional), horizontal navigation menu (optional), and CTA buttons (optional). Features responsive design with hamburger menu on mobile.

Functional Documentation

Role	Scenario	Description
system	Display navigation section	Shows brand logo, optional website switcher dropdown, optional horizontal navigation menu with page links, and optional CTA buttons on desktop. Switches to mobile hamburger menu on smaller viewports.
system	Display mobile navigation	On mobile, shows logo and hamburger icon. Clicking hamburger opens slide-out menu with navigation items.
editor	Configure brand logo	Upload brand-specific logo for navigation section. Logo links to homepage. Supports different logos per brand (Collegium, Mondial, Cooltura, BW).
editor	Configure website switcher	Optional website switcher displays available brand sites (Collegium, Mondial, Cooltura, BW etc.). Current site is shown with dropdown arrow. Label text "Naša spletna mesta:" precedes dropdown.
editor	Configure navigation menu	Optional horizontal navigation menu. Each menu item requires label, optional icon, and URL. Supports nested submenu items organized in groups. Menu items can be reordered. Active page highlighting is automatic.
editor	Configure CTA buttons	Optional CTA buttons can be added to navigation section (e.g., "Pomoč in podpora"). Requires label and URL. Displays as outlined button style.
user	Use navigation section	Click logo to return to homepage. Use optional website switcher to navigate between brand sites. Click optional navigation menu items to navigate. Click optional CTA buttons to perform actions.
user	Use mobile navigation	On mobile, click hamburger icon to open/close slide-out menu with navigation items.

Properties

Responsive (Variant)

Value	Example
Desktop
Mobile