MobileNavKit

Code

import { ArchiveIcon } from "lucide-react";import { SwipeActionRow } from "@fadymondy/nasaq/web";export function Row() {  return (    <SwipeActionRow endActions={[{ id: "archive", label: "Archive", icon: ArchiveIcon, tone: "primary", onSelect: () => {} }]}>      <div className="p-4">Design review moved to 3 PM</div>    </SwipeActionRow>  );}

Navigation · beta

Live examples and controls: MobileNavKit in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/mobile-nav-kit.json

Three touch-first pieces. BottomTabBar is the thumb-reach navigation with badges. SwipeActionRow reveals actions when a row is dragged toward either inline edge. FilterStrip is a row of chips that scrolls sideways and keeps the active chip in view.

When to useCopy Anchor Link

• Phone layouts with three to five top-level destinations.
• Lists where each row has quick actions (archive, delete, star).

When not to useCopy Anchor Link

• Desktop navigation: use the sidebar or tabs.
• Actions that must be discoverable without a gesture: also show a button. Swipe rows already offer the same actions through a context-click menu.

ImportCopy Anchor Link

import { BottomTabBar, FilterStrip, SwipeActionRow } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"

Quick startCopy Anchor Link

import { ArchiveIcon } from "lucide-react";
import { SwipeActionRow } from "@fadymondy/nasaq/web";

export function Row() {
  return (
    <SwipeActionRow endActions={[{ id: "archive", label: "Archive", icon: ArchiveIcon, tone: "primary", onSelect: () => {} }]}>
      <div className="p-4">Design review moved to 3 PM</div>
    </SwipeActionRow>
  );
}

AnatomyCopy Anchor Link

BottomTabBar        nav data-slot="bottom-tab-bar"   items with icon, label, badge
FilterStrip         data-slot="filter-strip"         aria-pressed chips, edge fade mask
SwipeActionRow      data-slot="swipe-action-row"     start and end action panels, sliding content

APICopy Anchor Link

BottomTabBarCopy Anchor Link

FilterStripCopy Anchor Link

SwipeActionRowCopy Anchor Link

The pure gesture maths (clampSwipe, settleSwipe, nextTabIndex) is in mobile-nav-math.ts with node tests.

ExamplesCopy Anchor Link

The lab page combines all three over an inbox list.

AccessibilityCopy Anchor Link

Tabs use arrow keys, Home and End. Chips are aria-pressed buttons. Swipe actions are reachable from the context-click menu, so keyboard and mouse users are not left out. The gesture handles touch and pen only.

RTL & i18nCopy Anchor Link

Swipe offsets are inline: "start" reveals from the inline start edge in either direction, and the pointer delta is flipped in RTL. The filter strip scrolls with RTL-aware maths. Strings via useOptionalNasaq().

Styling & tokensCopy Anchor Link

Only --nq-* tokens. Action tones use the status colours.

Do / Don'tCopy Anchor Link

• Do limit swipe actions to two per side.
• Don't use a destructive action as the only way to do something.

RelatedCopy Anchor Link

ContextMenu, Tabs, Badge.

LabCopy Anchor Link

Pages / App / Mobile Nav Kit in the lab: Default, Arabic, Mobile.