Navigation

Convenience meta-package that re-exports every navigation component from the toolkit. Install one package instead of many; refer to each component's own page for detailed API and accessibility notes.

Installation

npm install @xsolla/xui-navigation

Imports

import { Breadcrumbs, Link, NavBar, Pagination, Segmented, TabBar, Tabs } from '@xsolla/xui-navigation';

Quick start

import { Tabs, NavBar, Breadcrumbs } from '@xsolla/xui-navigation';

export default function Example() {
  const [active, setActive] = React.useState('home');
  return (
    <>
      <NavBar bordered><NavBar.Center>My App</NavBar.Center></NavBar>
      <Breadcrumbs items={[{ label: 'Home', href: '/' }, { label: 'Shop' }]} />
      <Tabs
        id="main"
        tabs={[{ id: 'home', label: 'Home' }, { id: 'shop', label: 'Shop' }]}
        activeTabId={active}
        onTabChange={setActive}
      />
    </>
  );
}

Re-exported packages

| Component(s) | Source package | | :----------- | :------------- | | Breadcrumbs | @xsolla/xui-breadcrumbs | | Link | @xsolla/xui-link | | NavBar | @xsolla/xui-nav-bar | | Pagination | @xsolla/xui-pagination | | Segmented | @xsolla/xui-segmented | | TabBar | @xsolla/xui-tab-bar | | Tabs | @xsolla/xui-tabs |

See each component's dedicated page for props, examples, and accessibility details.