Navigation · Truvar.ai Design System

Tabs

Built on Tabs

Overview

Results

Run history

This workflow scores open deals every Monday and flags the 20 most likely to close.

Bottom navigation

Built on Link / Button

Phones only, 3 to 5 tabs. Links navigate; a tab that opens a sheet is a button. Tap the current tab to scroll back to the top. Sits above the home indicator and mirrors in Arabic.

Inbox

Breadcrumbs

Built on Breadcrumbs

The last item is the current page and isn't a link. Separators mirror in Arabic.

Workspace
Reports
Churn
Q3 2026

Disclosure and accordion

Built on Disclosure + DisclosureGroup

Group them for an accordion. One open at a time by default.

In your chosen region. Customers in Egypt default to our Frankfurt region, with daily encrypted backups.

Pagination

Built on Button

Not part of React Aria; composed from its buttons. The current page is announced.

Navigation tree

Built on NavigationTree + RouterProvider

App navigation with sections and nesting. The current page is marked, and its parent stays highlighted when collapsed. Links go through your router.

Workspace

Home

Calls

Today14

Missed3

Keyboard shortcuts

Built on Keyboard (kbd)

Shortcut labels for menus and help screens. Keys always read left to right, even in Arabic.

Search everything: ⌘K
Go to calls: GC
Ask the assistant: /
Export the current view: ⇧⌘E
Close a dialog or menu: Esc

Hover preview

Built on PreviewTrigger + Popover

Hover or focus a link to see a summary without leaving the page. It opens after a short pause so it doesn't flash.

Follow up with Tarek Saleh before Thursday.