Design System
Components

NavBar

Floating glass bottom navigation — equal tabs in a frosted pill over a midnight fade, collapsing to icons on scroll.

Figma description · navbarOpen in Figma ↗

Use for

App-level navigation on every main screen. Place exactly one navbar per screen, fixed to the bottom of the viewport, outside any section or scroll container.

Not for

Navigation within a page or section — use tabs or page-header-tabs instead. Do not use alongside cta-bar or cta-navbar; when either of those is present on a screen, the navbar is not used.

Choosing

The navbar ships in two configurations driven by authentication state.

logged-in shows Home, Support, Profile, and Shop tabs. Home is the default active tab.

logged-out (guest) shows Shop, Plans, Devices, and eLife tabs. Plans is the default active tab.

The active tab is always indicated by a filled brand red icon and an expanded pill. Do not manually override individual tab states inside the component — active state is set at the screen level by selecting the correct page variant on navbar-tabs-set.

Set scroll-direction=down to hide the navbar on downward scroll and scroll-direction=up to reveal it on upward scroll.

Set logged-in=true or logged-in=false on the profile atom to adapt the Profile tab to the user's authentication state.

In RTL contexts, the full tab set mirrors automatically — no manual adjustment to individual tabs is needed.

Rules

Fix to the bottom of the screen. Never place inside a section, card, or scroll slot. Use exactly one navbar per screen — never stack or duplicate. Never use together with cta-bar; when cta-navbar is present, the navbar is omitted from the screen. Outer padding is 16px on both sides. Gap between tab items is 8px. Total component height is 114px, including the iOS Home Indicator. Do not resize the component or manually select individual tab active states — the tab set and active destination are always controlled at the screen level.

Scroll ↑ / ↓ to expand / collapse the nav
Props
// Floating glass pill (white 15% + blur, no border) over a midnight fade, 4 equal tabs.
// Active tab = solid white pill, red 32pt icon + body/xs label (Regular, not bold).
// Scrolling down collapses the bar to icons only.
import SwiftUI
import EandTokens

struct NavTab: View {
  let title: String; let icon: Image; let active: Bool
  var body: some View {
    VStack(spacing: 0) {
      icon.frame(width: EandIcon.icon2xl, height: EandIcon.icon2xl)
      Text(title).font(.system(size: EandTypography.bodyXs.size))
    }
    .foregroundColor(active ? EandColor.navbarTabTextSelected : EandColor.navbarTabTextDefault)
    .padding(.bottom, EandSpacing.xs)
    .frame(maxWidth: .infinity)
    .background(active ? EandColor.navbarTabSurfaceSelected : .clear)
    .clipShape(Capsule())
    .padding(.vertical, EandSpacing.xs)
  }
}

// Bar: HStack(spacing: 0) { tabs }
//   .padding(.horizontal, EandSpacing.xs)
//   .background(EandColor.surfaceGlassWhiteMd).background(.ultraThinMaterial)
//   .clipShape(Capsule())

When to use

  • Use on the app's top-level screens to move between primary destinations. Mark the current destination active.
  • Don't use on pushed pages or inside flows; those take a TopBar with onBack. Not for switching views within a page (use Tabs).

Anatomy

  • Scrim — a midnight gradient behind the bar so it reads over any content.
  • Bar — one frosted pill of equal-width tabs.
  • Tab — an icon (or an avatar, such as the profile picture) over a label. The active tab sits on a white pill; its label stays Regular.
  • Home indicator — a 34px block holding the 144 × 5 bar.

Set scrollDirection="down" while the page scrolls down: the labels hide, the pills shrink to 36px and the bar narrows. up (default) restores it. Both transitions are animated.

<NavBar
  items={[
    { label: 'Home', icon: <Icon name="home" size={24} />, active: true },
    { label: 'Shop', icon: <Icon name="shop" size={24} /> },
    { label: 'Care', icon: <Icon name="support-agent" size={24} /> },
  ]}
/>

Props

PropTypeDefaultDescription
itemsNavItem[]—
scrollDirection?'up' | 'down'upFigma .navbar-scroll axis. down collapses to icons only (scrolled down); up (default) shows icon + label. Transitions are animated.

Design

Figma source: navbar — etisalat Consumer App DSL V1.2

  • Scrim padding-top 16 (spacing/lg); the gradient runs from transparent midnight to 40% at 48% and 70% at the bottom. Figma leaves it unbound, so it is a literal.
  • Bar: surface/glass/white/md with a 20px blur, no stroke, 4px side padding (spacing/xs), and no gap between tabs. Side margins are 16, or 48 when collapsed (spacing/5xl).
  • Tab: a 4px wrapper top and bottom, a 32px icon box and a body/xs label (10px, 140%). Colours bind navbar-tab/text/default, navbar-tab/text/selected and navbar-tab/surface/selected.
  • Home indicator: the bar sits 21px down a 34px block, in surface/raised/default.

TopBar

The screen header — an inset rounded card with the status bar, a three-column header row, an optional large title and add-ons such as search, chips and tabs.

ActionBar

A 72px tappable bar — a leading visual, a title and description, and one trailing chevron, button or switch.

On this page

When to useAnatomyPropsDesign