AppRail

Composable rail structure for server switching, destinations, unread attention, and footer actions.

Preview#

Anatomy#

<AppShellRailSlot>
  <AppRailRoot>
    <AppRailHeader>
      {/* App-owned server switcher */}
    </AppRailHeader>
    <TooltipProvider>
      <AppRailNav>
        <Tooltip>
          <TooltipTrigger
            render={
              <AppRailItem
                selected
                nativeButton={false}
                render={<Link to="/chat" />}
              />
            }
          >
            <AppRailItemIcon>
              <MessageSquare />
              <AppRailItemAttention title="Unread activity" />
            </AppRailItemIcon>
            <AppRailItemLabel>Chat</AppRailItemLabel>
            <AppRailItemBadge>3</AppRailItemBadge>
          </TooltipTrigger>
          <TooltipContent side="right">Chat</TooltipContent>
        </Tooltip>
      </AppRailNav>
      <AppRailFooter>
        <NotificationCenter>
          <NotificationCenterTrigger type="button" aria-label="Notification center" />
        </NotificationCenter>
        <Tooltip>
          <TooltipTrigger
            render={
              <AppRailItem
                nativeButton={false}
                render={<button type="button" />}
              />
            }
          >
            <AppRailItemIcon>
              <Settings />
            </AppRailItemIcon>
            <AppRailItemLabel>Settings</AppRailItemLabel>
          </TooltipTrigger>
          <TooltipContent side="right">Settings</TooltipContent>
        </Tooltip>
      </AppRailFooter>
    </TooltipProvider>
  </AppRailRoot>
</AppShellRailSlot>

API#WIP

AppRailRoot#

...props
useRender.ComponentProps<"div">
Layout root for header, nav, and footer regions. Owns no selection state.

AppRailHeader#

...props
useRender.ComponentProps<"div">
Top region for an app-owned server switcher or equivalent identity control.

AppRailNav#

...props
useRender.ComponentProps<"nav">
Primary destinations region. Mount separate desktop and mobile Nav compositions when needed; visibility stays caller-owned.

AppRailItem#

selected
boolean
Marks the item as selected. Sets data-selected and aria-pressed when nativeButton is true. Owned by the caller.
nativeButtondefault: true
boolean
When false, skip native button type/disabled/aria-pressed wiring so render can replace the host element (for example a router Link).
...props
useRender.ComponentProps<"button">
Button attributes plus render. Compose icon, label, badge, and attention parts as children.

AppRailItemIcon#

...props
useRender.ComponentProps<"span">
Square icon slot. Place the glyph and an optional AppRailItemAttention here.

AppRailItemLabel#

...props
useRender.ComponentProps<"span">
Visible or assistive label for the item.

AppRailItemBadge#

...props
useRender.ComponentProps<"span">
Optional unread or count badge beside the icon.

AppRailItemAttention#

title
string
Optional label read to assistive tech. Renders the pink AppRailItemIndicator pixel, which stays decorative; takes no children.

AppRailItemIndicator#

...props
Status props
Decorative status pixel at the icon's top-right corner. Defaults to the accent (pink) variant at sm; usually rendered by AppRailItemAttention. It never animates.