NavigationBar

Summary

NavigationBar is the app’s primary, persistent navigation surface. On mobile/tablet (xs, md) it is a bottom tab bar of icon-only NavigationBarItems; on desktop (mac/windows/linux) it is a vertical side rail. The v2.0 Supernova rework restyles the iOS and Android bottom bars: iOS adopts a native-like floating, glass, fully-rounded pill; Android gets a dedicated tablet md bottom-bar view and an adjusted xs height, using an edge-to-edge bar with an underline selected indicator.

Anatomy

NavigationBar (xs bottom bar)

• 1
  Container — bar background bg-primary #F7F7F8, top border border-secondary #E2E2E4 @ 0.5.
• 2
  Stack — the row of items, height 56.
• 3
  NavigationBarItem ×N — one per destination (icon-only), bound to breakpoint / variant / state / isSelected.
• 4
  NativeHandle — gesture / home-indicator region (height 24), with the grab handle (4 × 108, radius full).
• 5
  bg — background layer (height 24, background blur).

NavigationBarItem

• A
  Wrapper — radius border-radius-full (xs unselected) or border-radius-md 12 (selected / desktop).
• B
  Icon — size M; Outlined (unselected) / Filled (selected); optional hasIndicator badge.
• C
  Label — shown where labels apply (desktop). Hidden on iOS & Android in v2.0.

Properties / API

NavigationBar

NavigationBarItem

Variants

• Breakpoint: xs (phone), md (tablet bottom bar / desktop rail).
• Platform: iOS · android · mac · windows · linux. iOS/Android = bottom bar; desktop = vertical side rail.
• Item icon variants (9): home, scamProtection, darkWebMonitor, productHub, profile, meshnet, shareFiles, cloud, help.
• Theme: light and dark are both specified.

States (NavigationBarItem)

• Unselected — outlined icon, wrapper radius full, no fill.
• Selected (isSelected=true) — filled icon; highlight bg-tertiary #EDEDED at radius md. Android adds an underline beneath the icon; iOS shows the pill highlight behind the icon.
• Pressed (state=active) — subtle circular background behind the icon.
• With badge (hasIndicator=on) — top-right dot; green = feature on, red = action needed (leak/scam/quarantine/incoming file/payment failed/update/new notification).

Sizes / heights

• Item (xs): full-radius pill, padding 4 (top/bottom) × 16 (left/right), ~32 icon container, item spacing 10.
• Item (md / desktop): 40 × 40, radius md (12), padding 8 all sides, fixed size.
• Bar content row (Stack): height 56.
• bg / handle: bg height 24; handle 4 × 108.

Breakpoints & platforms

Only xs and md are defined for the bottom-bar form (no sm/lg/xl).

Design tokens

• Bar: bg-primary #F7F7F8 / #141415 · bg-glass #F7F7F8B2 / #141415B2 · blur-md 16 · gradient bg-gradient-primary-start→…-end · border border-secondary #E2E2E4 @ 0.5.
• Item: selected highlight bg-tertiary #EDEDED @ radius border-radius-md 12 · unselected radius border-radius-full 9999 · label text-primary #2A2A2D/#FFFFFF, style body-2xs-medium (Inter Medium 11/18) or caption-medium.
• Handle: text-primary #2A2A2D, radius full.
• Spacing: 0 / 2 / 4 / 8 / 12 / 16 / 20 / 24.

Accessibility

• Treat items as a tab list; the selected item must expose its selected/current state to AT (not just visually).
• Icon-only items (labels hidden on iOS/Android v2.0) need accessible names — use the destination name as the label / contentDescription / accessibilityLabel.
• Desktop: vertical-rail items surface a Tooltip with the destination name on hover — the effective label for icon-only rail items.
• Status badges (hasIndicator) convey state by colour (green = on, red = action needed) — make the meaning available non-visually.
• Hit area: containers 32–40 with padding; the floating iOS pill keeps clear of the home indicator.

Usage

Implementation status

Implemented at v1.0 across platforms; the v2.0 Supernova rework (iOS pill, Android tablet md + xs height) is the work to ship. Repo implementations found on Android, Windows, macOS.

Changelog

• v2.022.6.2026 · in progress
  • Supernova rework for Android & iOS.
  • iOS: switch to native-like navigation design.
  • Android: add dedicated tablet md view; adjust height on xs.
• v1.016.10.2025
  • Initial release.

Ticket scaffold

Jira ticket template

Jira wiki-markup. Copy into a new issue, replace every [PLACEHOLDER], and duplicate per platform (this update is iOS & Android only).

h2. [iOS | Android] · NavigationBar v2.0 — Supernova rework

*Project / Epic*  : [EPIC-KEY]  Aurora AppKit · Supernova
*Issue type*      : Story
*Components*      : NavigationBar · [PLATFORM]
*Labels*          : aurora-appkit, supernova, design-system, navigation-bar, mobile
*Priority*        : [High]
*Story points*    : [estimate]
*Fix version*     : NavigationBar v2.0
*Sprint*          : [sprint]
*Assignee*        : [assignee]

h3. Background
Supernova rework of the primary navigation. SCOPE: iOS and Android ONLY (desktop rail unchanged). Design status is "in progress" — confirm final v2.0 frames before starting.

h3. Objective
Implement NavigationBar v2.0 on [PLATFORM] (iOS or Android): the new bottom-bar design + per-breakpoint layout, mapped to [PLATFORM] conventions.

h3. Design source
* Figma — "Aurora AppKit · Components" -> NavigationBar page (Specs, Changelog; v2.0 light/dark variant frames)
* Handover spec — supernova-handover/navigationbar.html
* [paste the platform-specific Figma frame link]

h3. Spec (platform-agnostic — map to [PLATFORM] idioms)
* Per-platform form :
*# iOS — floating, detached, fully-rounded GLASS pill ({{bg-glass}} + {{blur-md}} 16 + gradient + shadow); selected = filled icon + pill highlight; labels hidden; 360x82 (xs) / 700x82 (md, centred)
*# Android — edge-to-edge bar, hairline top border ({{border-secondary}} at 0.5) + gesture handle; selected = filled icon + underline; labels hidden; xs HEIGHT ADJUSTED (360x88); NEW dedicated tablet md view
* Item ({{NavigationBarItem}}) props : {{breakpoint}} (xs | md) · {{variant}} (home | scamProtection | darkWebMonitor | productHub | profile | meshnet | shareFiles | cloud | help) · {{isSelected}} · {{state}} (default | active) · {{hasIndicator}} (on | off; green = on, red = action needed)
* Tokens : {{bg-primary}} / {{bg-glass}} · {{bg-tertiary}} #EDEDED (selected) · {{border-radius-md}} 12 (selected) / {{border-radius-full}} (unselected) · label {{body-2xs-medium}}

h3. Scope
In scope : iOS pill OR Android edge-to-edge + tablet md + xs height, on [PLATFORM]; 9 item variants; isSelected / state / hasIndicator.
Out of scope : desktop (mac/windows/linux) rail (unchanged); the other mobile platform (separate ticket).

h3. Dependencies
* Final v2.0 design sign-off (in progress)
* Nav icon set + Badge/indicator on [PLATFORM]

h3. Acceptance criteria
# iOS renders the floating glass pill (blur + gradient + shadow), labels hidden, selected = pill highlight + filled icon.
# Android renders the edge-to-edge bar with hairline top border + gesture handle, labels hidden, selected = underline + filled icon; xs height per spec; tablet md view added.
# Exactly one item is selected; selection is announced to assistive tech; icon-only items carry accessible names (the destination name).
# {{hasIndicator}} dot semantics: green = feature on, red = action needed; meaning available non-visually.
# Tokens only; light and dark verified.

h3. Definition of Done
* Matches the Figma v2.0 variant frames (visual diff) for [PLATFORM], light and dark
* Tokens only; desktop rail untouched
* Tests updated; reviewed and merged; version v2.0; changelog updated
* Tab semantics + selected-state announcement verified with the [PLATFORM] screen reader

h3. QA / test notes
* iOS: pill clears the home indicator; Android: bar sits above the gesture area
* Phone (xs) and tablet (md); selection, badges, dark mode