Skip to content

Navigation

The navigation components of @arbol-ai/ui: Breadcrumbs, Link, Pagination, Tabs.

  • Breadcrumbs: Where the page sits: links up the hierarchy and the current page last, in a navigation landmark. With collapseOnPhone, a phone shows only the current page and its parent as a back arrow.
  • Link: Text that navigates: inside a sentence or on its own. Internal links go through the app router; links that open a new tab protect their opener. Use ButtonLink when navigation should look like an action.
  • Pagination: The footer of a list: Pagination pages a list the browser holds (“16–30 of 120”); CursorPagination pages a server list that only knows whether another page exists. Both render nothing when there is nowhere to go.
  • Tabs: Sections of one page or record. Arrow keys move between tabs, the thumb slides to the selection and the panel height follows its content. Keep the selected tab in the URL; give tabs an href when each section is its own route.

Type to search…

↑↓ navigate↵ selectEsc close