@xsolla/xui-navigation

Convenience re-export of all navigation components: Breadcrumbs, Link, NavBar, Pagination, Segmented, TabBar, and Tabs.

Installation

yarn add @xsolla/xui-navigation

Usage

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

function App() {
  const [page, setPage] = React.useState(1);
  const [activeTab, setActiveTab] = React.useState('home');

  return (
    <>
      <NavBar bordered>
        <NavBar.StartSlot><BackButton /></NavBar.StartSlot>
        <NavBar.Center><Text>My App</Text></NavBar.Center>
      </NavBar>
      <Breadcrumbs items={[{ label: 'Home', href: '/' }, { label: 'Shop' }]} />
      <Tabs
        id="main"
        tabs={[{ id: 'home', label: 'Home' }, { id: 'shop', label: 'Shop' }]}
        activeTabId={activeTab}
        onChange={setActiveTab}
      />
      <Pagination totalPages={20} currentPage={page} onPageChange={setPage} />
    </>
  );
}

Components

• Breadcrumbs — Accessible breadcrumb trail
• NavBar — Top navigation bar with start/centre/end slots
• Pagination — Page navigation control
• Tabs / TabPanel — Tabbed interface with content panels
• TabBar — React Navigation-compatible bottom tab bar