Navbar

The Navbar is one global navigation surface, not a page-local header repeated across content. Its Properties define branding and behavior; its Style tab defines area, breakpoint, and state-specific presentation.

Properties

Open the global Navbar editor and read Properties in the order shown. Inspect Branding and favicon first, then Layout, Call to Action, Search, and menu behavior so visual styling follows the real navigation structure.

Configure Properties by responsibility

Branding controls the logo or wordmark and its home destination; favicon belongs to site identity, not a page. Layout balances branding, navigation items, social links, Search, and the Call to Action. Menu behavior determines whether descendants use Mega Menu, Tree Navigation, or None.

Menus and hierarchy

The main navigation follows visible page structure. Mega Menu uses a section-backed surface, Tree Navigation renders the recursive page tree, and None keeps descendants out of the Navbar. Confirm real destinations before decorating the menu.

Style

Switch to Style after Properties is correct. Choose the exact Style Area, breakpoint, and state, then inspect Body spacing and the supported controls without assuming one desktop value paints every mobile surface.

Style Areas, breakpoints, and states

Style Areas include Body, Logo, Logo Text, Navigation Items, Social Media, Call to Action, Announcement, and Secondary Toolbar. Shared paint begins on Desktop; use Tablet and Mobile for supported layout and sizing overrides. Add On Hover values only when they communicate a clear interaction.

Mobile Menu is a distinct surface

The opened burger menu has dedicated Body · Mobile Menu, Logo · Mobile Menu, Logo Text · Mobile Menu, Navigation Items · Mobile Menu, Social Media · Mobile Menu, and Call to Action · Mobile Menu areas. Verify their contrast and spacing directly instead of assuming the closed Navbar’s desktop paint covers them.

Test responsive behavior

Luna keeps inline items while they fit and switches to the burger when measured width runs out. Test long labels, search, CTA, social links, announcements, sticky or embedded behavior, submenu opening, and the mobile detail flow at several widths.

Accessibility checks

Use clear link names, visible keyboard focus, predictable submenu controls, sufficient contrast, touch-friendly targets, an obvious mobile close path, and no hover-only destination. Check that focus does not become trapped or move behind the open menu.

Navbar checklist

Page hierarchy correct. Branding and favicon verified. Layout balanced. CTA and Search purposeful. Menu mode intentional. Every Style Area reviewed. Burger transition unclipped. Keyboard and touch flows tested. Representative pages checked on all breakpoints.

Next steps

Review Footer as the complementary global surface, then use Publish a Site when approved Navbar changes are ready to reach the live project alongside connected design updates.