Nav bar · Astr design system

Variants

Pick a variant with the controls. The preview and both code blocks follow.

Variant

Active tab

Centre action

Variant.tsx

1<AppNavBar />

Implementation

The React tab is this site's own component, the same source that draws the preview, styled by the CSS below it. The Flutter tab is the Dart a screen builds it with, from the app's tokens.

Usage

1<AppNavBar />2<AppNavBar variant="bottom" active="forecast" action={false} />3<AppNavBar variant="top" />

app-nav-bar.tsx · barPath

1/** The bar's outline: rounded corners (--radius-f21) and the notch cut for the centre action, as NavBarClipper draws it. */2function barPath(w: number): string {3  const c = w / 2;4  const r = F.f21;5  return `M${r} 0 H${c - NOTCH_HALF} C${c - F.f34} 0 ${c - F.f34} ${NOTCH_DEPTH} ${c} ${NOTCH_DEPTH} C${c + F.f34} ${NOTCH_DEPTH} ${c + F.f34} 0 ${c + NOTCH_HALF} 0 H${w - r} A${r} ${r} 0 0 1 ${w} ${r} V${BAR_H - r} A${r} ${r} 0 0 1 ${w - r} ${BAR_H} H${r} A${r} ${r} 0 0 1 0 ${BAR_H - r} V${r} A${r} ${r} 0 0 1 ${r} 0 Z`;6}

app-nav-bar.tsx · AppNavBar

1/**2 * The app's two navigation bars. "bottom" is the tab bar with a notch for the centre action: four tabs, the active3 * one lit with a glow under its label, and the map action in the notch. "top" is the header: the location pill, the4 * logo, and the date stepper.5 */6export function AppNavBar({7  variant = "bottom",8  active: initial = "home",9  action = true,10}: {11  variant?: "bottom" | "top";12  active?: NavTab;13  /** Show the centre action in the notch (bottom bar). */14  action?: boolean;15}) {16  const [active, setActive] = useState<NavTab>(initial);17  const [ref, w] = useElementWidth<HTMLDivElement>(377);1819  if (variant === "top") {20    return (21      <div className="app-ui app-navbar is-top">22        <button type="button" className="app-ui app-button is-glass is-sm">23          <Glyph name="pin" />24          <span className="app-navbar-loc">Current Location</span>25        </button>26        {/* eslint-disable-next-line @next/next/no-img-element */}27        <img className="app-navbar-logo" src="/astr-icon.png" alt="Astr" />28        <div className="app-navbar-date">29          <button type="button" className="app-ui app-tile is-sm" aria-label="Previous day"><Glyph name="chevron-left" /></button>30          <button type="button" className="app-ui app-button is-glass is-sm">Oct 10</button>31          <button type="button" className="app-ui app-tile is-sm" aria-label="Next day"><Glyph name="chevron-right" /></button>32        </div>33      </div>34    );35  }3637  return (38    <div ref={ref} className="app-ui app-navbar is-bottom" style={{ height: BAR_H }}>39      <svg viewBox={`0 0 ${w} ${BAR_H}`} height={BAR_H} aria-hidden="true">40        <defs>41          <linearGradient id="nav-sheen" x1="0" x2="1" y1="0" y2="1">42            <stop offset="0" stopColor={stop("space-grey-50", 5)} />43            <stop offset="1" stopColor={stop("space-grey-50", 8)} />44          </linearGradient>45          <linearGradient id="nav-shine" gradientUnits="userSpaceOnUse" x1="0" x2="0" y1="0" y2={NOTCH_DEPTH}>46            <stop offset="0" stopColor={stop("deep-space-200", 10)} />47            <stop offset="0.5" stopColor={stop("deep-space-200", 1)} />48            <stop offset="1" stopColor={stop("deep-space-200", 10)} />49          </linearGradient>50        </defs>51        <path d={barPath(w)} fill={stop("space-grey-950", 1)} />52        <path d={barPath(w)} fill="url(#nav-sheen)" stroke={stop("space-grey-50", 5)} />53        <path d={notchPath(w)} fill="none" stroke="url(#nav-shine)" strokeWidth={F.f2} strokeLinecap="round" />54      </svg>55      <nav aria-label="Primary" className="app-navbar-items">56        {TABS.slice(0, 2).map((t) => (57          <NavItem key={t.id} tab={t} active={active === t.id} onSelect={setActive} />58        ))}59        <span className="app-navbar-gap" aria-hidden="true" />60        {TABS.slice(2).map((t) => (61          <NavItem key={t.id} tab={t} active={active === t.id} onSelect={setActive} />62        ))}63      </nav>64      {action && (65        <button type="button" className="app-ui app-tile is-round app-navbar-action" aria-label="Sky map">66          <Glyph name="map" />67        </button>68      )}69    </div>70  );71}

app-nav-bar.tsx · NavItem

1function NavItem({ tab, active, onSelect }: { tab: { id: NavTab; label: string; glyph: GlyphName }; active: boolean; onSelect: (t: NavTab) => void }) {2  return (3    <div className="app-navbar-tab" data-active={active || undefined} onClick={() => onSelect(tab.id)}>4      <button type="button" className="app-ui app-tile is-sm" aria-label={tab.label} aria-current={active ? "page" : undefined} aria-pressed={active}>5        <Glyph name={tab.glyph} />6      </button>7      <span className="app-micro" aria-hidden="true">{tab.label}</span>8    </div>9  );10}

app-ui.css

1.app-navbar { position: relative; width: min(100%, var(--container-f377)); margin-inline: auto; }23.app-navbar.is-bottom > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }45.app-navbar-items { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--spacing-f21); }67.app-navbar-gap { flex: 0 0 var(--spacing-f89); }89.app-tile.is-round { border-radius: var(--radius-full); }1011.app-navbar-tab { display: grid; justify-items: center; gap: var(--spacing-f3); cursor: pointer; }1213.app-navbar-tab[data-active] .app-micro,14.app-navbar-tab:has(.app-tile:active) .app-micro { color: var(--c-text); text-shadow: 0 var(--spacing-f1) var(--spacing-f13) var(--c-accent), 0 0 var(--spacing-f1) color-mix(in srgb, var(--c-text) var(--mag-3), transparent); }1516.app-navbar-action { position: absolute; left: 50%; top: calc(var(--spacing-f55) / -2); transform: translateX(-50%); }1718.app-navbar.is-top { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-f8); padding: var(--spacing-f8) var(--spacing-f13); border-radius: var(--radius-f21); border: var(--spacing-f1) solid var(--hair); background: var(--sheen), var(--fill); box-shadow: var(--highlight); box-sizing: border-box; }1920.app-navbar-date { display: flex; align-items: center; gap: var(--spacing-f5); }

Usage

1// ScaffoldWithNavBar owns both bars. Tabs: Home 0, Objects 1, Forecast 2, Settings 3.2Scaffold(3bottomNavigationBar: Stack(/* NavBarClipper and four _NavBarItem */),4floatingActionButton: FloatingActionButton(/* sky map */),5)

scaffold_with_nav_bar.dart · NavBarClipper

1class NavBarClipper extends CustomClipper<Path> {2  @override3  Path getClip(Size size) {4    final Path path = Path();5    final double center = size.width / 2;6    7    // Start from top-left8    path.moveTo(0, 0);9    10    // Line to the start of the notch11    path.lineTo(center - 50, 0);12    13    // The Notch Curve (Same as NotchShinePainter)14    path.cubicTo(15      center - 35, 0,      // Control point 116      center - 35, 42,     // Control point 217      center, 42           // End point (bottom center)18    );19    path.cubicTo(20      center + 35, 42,     // Control point 121      center + 35, 0,      // Control point 222      center + 50, 0       // End point23    );24    25    // Line to top-right26    path.lineTo(size.width, 0);27    28    // Line to bottom-right29    path.lineTo(size.width, size.height);30    31    // Line to bottom-left32    path.lineTo(0, size.height);33    34    path.close();35    return path;36  }3738  @override39  bool shouldReclip(covariant CustomClipper<Path> oldClipper) => false;40}

scaffold_with_nav_bar.dart · NotchShinePainter

1class NotchShinePainter extends CustomPainter {2  @override3  void paint(Canvas canvas, Size size) {4    final Paint paint = Paint()5      ..style = PaintingStyle.stroke6      ..strokeWidth = 2.07      ..strokeCap = StrokeCap.round;89    // Gradient to create the "shine" effect10    // Fades out at the ends (top) and bottom, concentrating the shine in the middle11    final Shader shader = LinearGradient(12      begin: Alignment.topCenter,13      end: Alignment.bottomCenter,14      colors: <Color>[15        AppColors.accent.withValues(alpha: 0),16        AppColors.accent.withValues(alpha: 0.8),17        AppColors.accent.withValues(alpha: 0),18      ],19      stops: const <double>[0, 0.5, 1],20    ).createShader(Rect.fromLTWH(0, 0, size.width, size.height));2122    paint.shader = shader;2324    final Path path = Path();25    final double center = size.width / 2;26    27    // We draw a curve that follows the notch shape.28    // Starting from the top edge (y=0) and curving down.29    30    // Left side of the notch31    path.moveTo(center - 50, 0); 32    path.cubicTo(33      center - 35, 0,      // Control point 1 (flat start)34      center - 35, 42,     // Control point 2 (curve down)35      center, 42           // End point (bottom center of notch)36    );37    38    // Right side of the notch39    path.cubicTo(40      center + 35, 42,     // Control point 1 (curve up)41      center + 35, 0,      // Control point 2 (flat end)42      center + 50, 0       // End point43    );4445    canvas.drawPath(path, paint);46  }4748  @override49  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;50}

scaffold_with_nav_bar.dart · _NavBarItem

1                      _NavBarItem(2                        icon: Ionicons.home_outline,3                        activeIcon: Ionicons.home,4                        label: 'Home',5                        isSelected: navigationShell.currentIndex == 0,6                        onTap: () => _onTap(context, 0),7                      ),8                      const SizedBox(width: 20),9                      _NavBarItem(10                        icon: Ionicons.planet_outline,11                        activeIcon: Ionicons.planet,12                        label: 'Objects',13                        isSelected: navigationShell.currentIndex == 1,14                        onTap: () => _onTap(context, 1),15                      ),16                      const Spacer(),17                      const SizedBox(width: 48), // FAB notch gap18                      const Spacer(),19                      _NavBarItem(20                        icon: Ionicons.calendar_outline,21                        activeIcon: Ionicons.calendar,22                        label: 'Forecast',23                        isSelected: navigationShell.currentIndex == 2,24                        onTap: () => _onTap(context, 2),25                      ),26                      const SizedBox(width: 20),27                      _NavBarItem(28                        icon: Ionicons.settings_outline,29                        activeIcon: Ionicons.settings,30                        label: 'Settings',31                        isSelected: navigationShell.currentIndex == 3,32                        onTap: () => _onTap(context, 3),33                      ),34                      const SizedBox(width: 32),35                    ],36                  ),37                ),38              ),39            ),40          ),41          // Shine Effect42          IgnorePointer(43            child: CustomPaint(44              size: const Size(100, 40), // Approximate size of the notch area45              painter: NotchShinePainter(),46            ),47          ),48        ],49      ),50    );51  }5253  Widget _buildLoadingOverlay(bool isLoading) {54    if (!isLoading) return const SizedBox.shrink();5556    return Positioned.fill(57      child: ColoredBox(58        color: Colors.black.withValues(alpha: 0.5),59        child: const Center(60          child: CosmicLoader(),61        ),62      ),63    );64  }6566  void _onTap(BuildContext context, int index) {67    navigationShell.goBranch(68      index,69      initialLocation: index == navigationShell.currentIndex,70    );71  }72}7374class NavBarClipper extends CustomClipper<Path> {75  @override76  Path getClip(Size size) {77    final Path path = Path();78    final double center = size.width / 2;79    80    // Start from top-left81    path.moveTo(0, 0);82    83    // Line to the start of the notch84    path.lineTo(center - 50, 0);85    86    // The Notch Curve (Same as NotchShinePainter)87    path.cubicTo(88      center - 35, 0,      // Control point 189      center - 35, 42,     // Control point 290      center, 42           // End point (bottom center)91    );92    path.cubicTo(93      center + 35, 42,     // Control point 194      center + 35, 0,      // Control point 295      center + 50, 0       // End point96    );97    98    // Line to top-right99    path.lineTo(size.width, 0);100    101    // Line to bottom-right102    path.lineTo(size.width, size.height);103    104    // Line to bottom-left105    path.lineTo(0, size.height);106    107    path.close();108    return path;109  }110111  @override112  bool shouldReclip(covariant CustomClipper<Path> oldClipper) => false;113}114115class NotchShinePainter extends CustomPainter {116  @override117  void paint(Canvas canvas, Size size) {118    final Paint paint = Paint()119      ..style = PaintingStyle.stroke120      ..strokeWidth = 2.0121      ..strokeCap = StrokeCap.round;122123    // Gradient to create the "shine" effect124    // Fades out at the ends (top) and bottom, concentrating the shine in the middle125    final Shader shader = LinearGradient(126      begin: Alignment.topCenter,127      end: Alignment.bottomCenter,128      colors: <Color>[129        AppColors.accent.withValues(alpha: 0),130        AppColors.accent.withValues(alpha: 0.8),131        AppColors.accent.withValues(alpha: 0),132      ],133      stops: const <double>[0, 0.5, 1],134    ).createShader(Rect.fromLTWH(0, 0, size.width, size.height));135136    paint.shader = shader;137138    final Path path = Path();139    final double center = size.width / 2;140    141    // We draw a curve that follows the notch shape.142    // Starting from the top edge (y=0) and curving down.143    144    // Left side of the notch145    path.moveTo(center - 50, 0); 146    path.cubicTo(147      center - 35, 0,      // Control point 1 (flat start)148      center - 35, 42,     // Control point 2 (curve down)149      center, 42           // End point (bottom center of notch)150    );151    152    // Right side of the notch153    path.cubicTo(154      center + 35, 42,     // Control point 1 (curve up)155      center + 35, 0,      // Control point 2 (flat end)156      center + 50, 0       // End point157    );158159    canvas.drawPath(path, paint);160  }161162  @override163  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;164}165166class _NavBarItem extends StatelessWidget {167168  const _NavBarItem({169    required this.icon,170    required this.activeIcon,171    required this.label,172    required this.isSelected,173    required this.onTap,174  });175  final IconData icon;176  final IconData activeIcon;177  final String label;178  final bool isSelected;179  final VoidCallback onTap;180181  @override182  Widget build(BuildContext context) {183    final Color itemColor = isSelected ? AppColors.textPrimary : AppColors.textSubdued;184    185    return InkWell(186      onTap: onTap,187      borderRadius: BorderRadius.circular(12),188      child: Padding(189        padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),190        child: Column(191          mainAxisSize: MainAxisSize.min,192          children: <Widget>[193            Icon(194              isSelected ? activeIcon : icon,195              color: itemColor,196              size: 24,197            ),198            const SizedBox(height: 4),199            Text(200              label,201              style: AppTypography.nav.copyWith(202                color: itemColor,203                shadows: isSelected204                    ? const <Shadow>[205                        Shadow(206                          color: Color(0xFF3A7FFF),207                          blurRadius: 12.2,208                          offset: Offset(0, 1),209                        ),210                        Shadow(211                          color: Color(0x40FFFFFF),212                          blurRadius: 1,213                          offset: Offset.zero,214                        ),215                      ]216                    : null,217              ),218            ),219          ],220        ),221      ),222    );223  }224}

The Flutter tab is the app's own source: NavBarClipper cuts the notch, NotchShinePainter draws its shine and _NavBarItem is one tab. The web bar draws the same shapes from design tokens, so its sizes (89 tall, 34 deep notch) differ from the app's (70, 42) until the app moves to the tokens.

API reference

React prop	Flutter parameter	Type	Default	Meaning
variant	the two bars of ScaffoldWithNavBar	bottom, top	bottom	The tab bar with a notch, or the header.
active	navigationShell.currentIndex	home, objects, forecast, settings	home	The selected tab. The web bar keeps its own state when you tap.
action	floatingActionButton	boolean	true	The centre action in the notch (the sky map).

Design tokens

Every value on this component is a system token. The last column is what the app widget uses today, so the gap to close is visible.

Role	CSS token	Dart token	App widget today
Bottom bar height	--spacing-f89	AstrSpace.f89	70 + safe area
Notch	depth --spacing-f34, half-width --spacing-f55	AstrSpace.f34, f55	depth 42, half-width 50
Surface	--sheen over space-grey-950 at --mag-1	AstrColors.spaceGrey[950], Mag.m1	AppColors.surfaceGlass #CC0C0F11
Tab	an icon tile (--spacing-f34) with its label (--text-s-2) under it	AstrGlassTile(size: AstrTileSize.sm)	icon 24, label 8, no tile
Active tab	tile selected in deep-space-200, label lit with a deep-space-200 glow	selected: true, AstrTone.deepSpace	textPrimary, #3A7FFF shadow
Inactive tab	tile in space-grey-300	tone space-grey-300	textSubdued #7D8792
Notch shine	deep-space-200, --spacing-f2 stroke	Mag.m1	AppColors.accent, 2
Centre action	a round tile, --spacing-f55	AstrGlassTile, circular	FAB 52, circle
Top bar	pills --spacing-f34 tall, --radius-full	AstrSize.controlCompact	30, radius 30

Preview#

Variants#

Implementation#

API reference#

Design tokens#

Preview

Variants

Implementation

API reference

Design tokens