IconRail

The simple shell's fixed column: 40px glyph items on the chrome ground with a shared active pill, a tooltip to the right and a hidden text label. An item with an href is a link; one with onPress is a button, so it can trigger the launcher or the account menu.

Icon rail

The simple shell's only fixed chrome: a 3.5rem column of 40px glyphs on the chrome ground. The active glyph carries a shared pill that travels between items, the Apps glyph opens the launcher, and the footer holds Messages (only while something is unread) and the account.

active

unread

The page beside the rail.

<IconRail label="Primary">
  <IconRailBrand><BrandMark /></IconRailBrand>
  <IconRailItem
    icon={MessageSquare}
    label="Chat"
    href="/chat"
    isActive={mode === "chat"}
  />
  <DialogTrigger>
    <IconRailItem icon={LayoutGrid} label="Apps" />
    <LauncherPopover
      groups={LAUNCHER_GROUPS}
      footer={{ label: "All apps", href: "/tools" }}
      link={Link}
    />
  </DialogTrigger>
  <IconRailSpacer />
  <IconRailFooter>
    <IconRailItem
      icon={Inbox}
      label="Messages"
      href="/user/messages"
      badge={unread}
    />
    <UserMenu variant="sidebar" />
  </IconRailFooter>
</IconRail>