@xsolla/xui-nav-bar

Top navigation bar with start, centre, and end slots for building app headers.

Installation

yarn add @xsolla/xui-nav-bar

Usage

import { NavBar } from '@xsolla/xui-nav-bar';

function MyHeader() {
  return (
    <NavBar bordered size="md">
      <NavBar.StartSlot>
        <BackButton />
      </NavBar.StartSlot>
      <NavBar.Center>
        <Text>Page Title</Text>
      </NavBar.Center>
      <NavBar.EndSlot>
        <SettingsButton />
      </NavBar.EndSlot>
    </NavBar>
  );
}

Components

• NavBar — Full-width header bar container
• NavBar.StartSlot — Left-aligned slot
• NavBar.Center — Centre-aligned slot
• NavBar.EndSlot — Right-aligned slot

Props

NavBar

| Prop | Type | Default | Description | |------|------|---------|-------------| | size | 'sm' \| 'md' \| 'lg' | 'md' | Height variant (48 / 64 / 80px) | | bordered | boolean | false | Show bottom border | | backgroundColor | string | — | Custom background colour |