NavBar

A slot-based application header with StartSlot, Center, and EndSlot regions. Three height variants for compact, standard, and marketing layouts.

Installation

npm install @xsolla/xui-nav-bar

Imports

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

NavBar.StartSlot, NavBar.Center, and NavBar.EndSlot are attached to the root component.

Quick start

import * as React from 'react';
import { NavBar } from '@xsolla/xui-nav-bar';
import { Xsolla } from '@xsolla/xui-logos-xsolla';
import { Button } from '@xsolla/xui-button';

export default function Example() {
  return (
    <NavBar>
      <NavBar.StartSlot>
        <Xsolla variant="full" size="sm" />
      </NavBar.StartSlot>
      <NavBar.Center>Navigation</NavBar.Center>
      <NavBar.EndSlot>
        <Button size="sm">Sign In</Button>
      </NavBar.EndSlot>
    </NavBar>
  );
}

API Reference

<NavBar>

| Prop | Type | Default | Description | | --- | --- | --- | --- | | children | ReactNode | - | Slot components (StartSlot, Center, EndSlot). | | size | 'sm' \| 'md' \| 'lg' | 'md' | Height preset. sm = 48px / 12px horizontal padding, md = 64px / 16px, lg = 80px / 20px. | | bordered | boolean | false | Show a 1px bottom border. | | backgroundColor | string | theme background.primary | Custom background colour. | | testID | string | - | Test identifier. |

Inherits ThemeOverrideProps (themeMode, themeProductContext).

Layout: StartSlot and EndSlot share flex: 1; Center takes flex: 2. Each slot uses flex-direction: row with an 8px gap between children.

<NavBar.StartSlot> / <NavBar.Center> / <NavBar.EndSlot>

| Prop | Type | Description | | --- | --- | --- | | children | ReactNode | Slot content. | | testID | string | Test identifier. |

StartSlot aligns to the start, EndSlot to the end, Center to the centre.

Examples

Application header

import * as React from 'react';
import { NavBar } from '@xsolla/xui-nav-bar';
import { Xsolla } from '@xsolla/xui-logos-xsolla';
import { Button, IconButton } from '@xsolla/xui-button';
import { Bell, Menu } from '@xsolla/xui-icons-base';

export default function AppHeader() {
  return (
    <NavBar size="md" bordered>
      <NavBar.StartSlot>
        <IconButton icon={<Menu size={20} />} variant="secondary" tone="mono" size="sm" aria-label="Menu" />
        <Xsolla variant="full" size="sm" />
      </NavBar.StartSlot>
      <NavBar.Center>
        <nav aria-label="Main navigation" style={{ display: 'flex', gap: 24 }}>
          <a href="/dashboard">Dashboard</a>
          <a href="/products">Products</a>
          <a href="/analytics">Analytics</a>
        </nav>
      </NavBar.Center>
      <NavBar.EndSlot>
        <IconButton icon={<Bell size={20} />} variant="secondary" tone="mono" size="sm" aria-label="Notifications" />
        <Button size="sm">Account</Button>
      </NavBar.EndSlot>
    </NavBar>
  );
}

Mobile header

import * as React from 'react';
import { NavBar } from '@xsolla/xui-nav-bar';
import { IconButton } from '@xsolla/xui-button';
import { ArrowLeft, MoreVr } from '@xsolla/xui-icons-base';

export default function MobileHeader() {
  return (
    <NavBar size="sm">
      <NavBar.StartSlot>
        <IconButton icon={<ArrowLeft size={20} />} variant="secondary" tone="mono" size="sm" aria-label="Back" />
      </NavBar.StartSlot>
      <NavBar.Center>
        <strong>Page Title</strong>
      </NavBar.Center>
      <NavBar.EndSlot>
        <IconButton icon={<MoreVr size={20} />} variant="secondary" tone="mono" size="sm" aria-label="More options" />
      </NavBar.EndSlot>
    </NavBar>
  );
}

Marketing header

import * as React from 'react';
import { NavBar } from '@xsolla/xui-nav-bar';
import { Xsolla } from '@xsolla/xui-logos-xsolla';
import { Button } from '@xsolla/xui-button';

export default function MarketingHeader() {
  return (
    <NavBar size="lg" backgroundColor="transparent">
      <NavBar.StartSlot>
        <Xsolla variant="full" color="white" size="md" />
      </NavBar.StartSlot>
      <NavBar.Center>
        <nav aria-label="Main navigation" style={{ display: 'flex', gap: 32 }}>
          <a href="/products" style={{ color: '#fff' }}>Products</a>
          <a href="/solutions" style={{ color: '#fff' }}>Solutions</a>
          <a href="/pricing" style={{ color: '#fff' }}>Pricing</a>
          <a href="/resources" style={{ color: '#fff' }}>Resources</a>
        </nav>
      </NavBar.Center>
      <NavBar.EndSlot>
        <Button variant="secondary" size="md">Sign In</Button>
        <Button size="md">Get Started</Button>
      </NavBar.EndSlot>
    </NavBar>
  );
}

Accessibility

• The component renders a plain header container — wrap your link group in a <nav aria-label="..."> (as in the examples) so the navigation region is announced.
• Provide aria-label on every IconButton used as an action.
• Mobile menu triggers should reflect aria-expanded state.
• Ensure interactive elements have visible focus styles (the toolkit's Button and IconButton provide them by default).