USER INTERFACE

Navbar

Top navigation for every part of Avava — app, marketing, projects, editors and the client portal.
THEME
DENSITY
01

Playground

Change the settings, then scroll the preview
Skip to content
NORDIC THREAD · SPRING 27Mývatn at dawn
Recent projects — scroll to see the navbar react
NTSpring 27 campaignNordic ThreadPostOct 27
KCWebsite v2Kaya CeramicsAt riskOct 30
FOParka lookbookFjord OutdoorShootNov 3
LCOctober retainerLumen CoffeeDoneSep 30
MOFrames campaignMira OpticsBriefNov 11
NTHoliday socialNordic ThreadBriefOct 31
KCGlaze studiesKaya CeramicsDoneSep 8
FOAW26 e-comFjord OutdoorPostOct 20
LCStore opening filmLumen CoffeeBlockedOct 18
MOPackagingMira OpticsBriefDec 10
At the top
<Navbar variant="solid" layout="split" onScroll="sticky" search cmdk notifications avatar />
Settings
STYLE
LAYOUT
ON SCROLL
SHOW
Tip: press Tab inside the preview — the “Skip to content” link appears first.
02

Anatomy

Five zones, one height
① BRAND · 30 + wordmarkAAVAVA② NAV · 36 h · 13.5/600OverviewProjectsCalendarClients③ SEARCH · ⌘KSearch…⌘K④ ACTIONS · 383⑤ PROFILE · 32
Height72 → 56 px when shrunk
Padding0 16 px · gap 14
Brandmark 30 radius 9 · wordmark 13/900 .28em
Links36 h · 0 12 px · 13.5 / 600 · active 800
Indicator2.5 px · slides 320 ms
Search36 h · radius 12 · 1 px w10 · ⌘K chip
Icon buttons38 × 38 · badge 16 coral
Avatar32 + 2 px focus ring
Backgroundsolid · glass blur 16 · transparent · light plate
Shadow on scroll0 10 24 rgba(0,0,0,.25)
03

Variants

Six bars for six places in Avava
Appsearch · ⌘K · bell · avatar
AAVAVASearch projects, clients…⌘K3
Marketingtransparent over photo · CTA
AVAVAWorkServicesStudioJournalBook a shoot
Projectback · status · tabs · share
NTSpring 27 campaignNordic Thread · DL-0231Post-production
Brief · approved Sep 19
Editorclose · save state · undo · publish
Spring 27 — Instagram carouselSaved
Selectionreplaces the bar when rows are selected
FilesSpring 27 / Selects · 42
Selecting rows swaps the bar for bulk actions.
Client portallight plate · client brand · pay
NTNordic Thread × Avava
What the client sees at their portal link.
04

Menus

What opens from the navbar
Mega menu3 columns + featured · 720 px
AVAVAWorkStudio
PHOTO
VIDEO
BRAND
Profile menuheader · items · theme · sign out
AAVAVA
Notificationstabs · unread · mark all
AAVAVA
Notifications
Workspace switcherlogos · role · check · create
05

Behaviour

Overflow, search and keyboard
Overflow → Moredrag the width
WIDTH640 px
AAVAVAOverviewProjectsCalendar
3 of 8 links fit · 5 in More
Expanding searchclick · type · Esc
AAVAVAProjectsCalendarClients
The links fade out to make room, the field takes focus, results appear as you type. Esc or clearing the field collapses it.
Skip link & focusTab order
Skip to content
AAVAVAHomeProjectsCalendarNotifications
Focus is on the page
Keyboard users land on “Skip to content” first, then brand → links → actions. Focus is always a visible 2 px ring.
06

Mobile

Burger, tab bar and a collapsing title
9:41▮▮▮
AAVAVA
OverviewSpring 27 · PostWebsite v2 · At riskParka lookbook · ShootFrames · Brief
Burger → full-screen menu
9:41▮▮▮
Home
Spring 27 · due Oct 273 invoices to sendClient review · 14:3012 new filesLena replied
Bottom tab bar · 5 items
9:41▮▮▮
Spring 27
Spring 27Nordic Thread · Post-productionBriefApprovedCastingDoneLocation scoutDoneShoot day 1DoneShoot day 2DoneShoot day 3DoneSelectsIn reviewRetouch 4013 / 40BTS filmRough cutDeliveryOct 27Balance invoiceDraft
Large title collapses on scroll
07

Rules & a11y

Markup and a checklist
Markup
<a class="skip-link" href="#main">Skip to content</a>
<header>
  <nav aria-label="Main">
    <a href="/" aria-label="Avava home">…</a>
    <ul>
      <li><a href="/projects" aria-current="page">Projects</a></li>
      <li><a href="/calendar">Calendar</a></li>
    </ul>
    <button aria-label="Notifications, 3 unread"
            aria-haspopup="menu" aria-expanded="false">…</button>
  </nav>
</header>
<main id="main" tabindex="-1">…</main>
Checklist6 of 8 checked
NAVBARFew top-level places (≤ 7) and you want the full width for content.Marketing site, client portal, editors
SIDEBARMany sections, nested items, power users who switch often.The Avava admin itself
TABSViews of one object — never to move between apps.Project: Brief / Shoot / Files
DO✓Keep one primary action, on the right✓Show where you are: indicator + aria-current✓Move overflow into “More” instead of wrapping✓Swap to a selection bar for bulk actions✓Use the light plate only for client-facing bars
DON’T✕Put more than 7 links in the bar✕Hide the bar on scroll in editors or forms✕Use transparent bars over busy photos without a scrim✕Stack navbar + sidebar + tabs + breadcrumbs together✕Open menus on hover only — always on click too