Nav Bar

A cross-platform React navigation bar component with a flexible slot-based layout for building application headers.

Installation

npm install @xsolla/xui-nav-bar
# or
yarn add @xsolla/xui-nav-bar

Demo

Basic Nav Bar

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 BasicNavBar() {
  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>
  );
}

Different Sizes

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

export default function Sizes() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
      <NavBar size="sm">
        <NavBar.Center>Small (48px)</NavBar.Center>
      </NavBar>
      <NavBar size="md">
        <NavBar.Center>Medium (64px)</NavBar.Center>
      </NavBar>
      <NavBar size="lg">
        <NavBar.Center>Large (80px)</NavBar.Center>
      </NavBar>
    </div>
  );
}

With Border

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

export default function Bordered() {
  return (
    <NavBar bordered>
      <NavBar.Center>Bordered Navigation</NavBar.Center>
    </NavBar>
  );
}

Anatomy

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

<NavBar
  size="md"                  // s, m, or l
  bordered={false}          // Show bottom border
  backgroundColor={color}   // Custom background
>
  <NavBar.StartSlot>        // Left-aligned content
    {logo}
  </NavBar.StartSlot>
  <NavBar.Center>           // Center-aligned content
    {navigation}
  </NavBar.Center>
  <NavBar.EndSlot>          // Right-aligned content
    {actions}
  </NavBar.EndSlot>
</NavBar>

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, MoreVertical } 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={<MoreVertical size={20} />}
          variant="secondary"
          tone="mono"
          size="sm"
          aria-label="More options"
        />
      </NavBar.EndSlot>
    </NavBar>
  );
}

Checkout Header

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

export default function CheckoutHeader() {
  return (
    <NavBar size="md" backgroundColor="#1a1a1a">
      <NavBar.StartSlot>
        <Xsolla variant="icon" color="brand" size="sm" />
      </NavBar.StartSlot>
      <NavBar.Center>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <Lock size={16} color="#4CAF50" />
          <span style={{ color: '#fff' }}>Secure Checkout</span>
        </div>
      </NavBar.Center>
      <NavBar.EndSlot>
        <IconButton
          icon={<HelpCircle size={20} />}
          variant="secondary"
          tone="mono"
          size="sm"
          aria-label="Help"
        />
      </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>
  );
}

API Reference

NavBar

NavBarProps:

| Prop | Type | Default | Description | | :--- | :--- | :------ | :---------- | | children | ReactNode | - | Slot components (StartSlot, Center, EndSlot). | | size | "sm" \| "md" \| "lg" | "md" | Navigation bar height. | | bordered | boolean | false | Show bottom border. | | backgroundColor | string | theme background | Custom background color. | | testID | string | - | Test identifier. |

NavBar.StartSlot

Left-aligned slot for logos and primary actions.

Props:

| Prop | Type | Description | | :--- | :--- | :---------- | | children | ReactNode | Content to display. | | testID | string | Test identifier. |

NavBar.Center

Center-aligned slot for navigation links and titles.

Props:

| Prop | Type | Description | | :--- | :--- | :---------- | | children | ReactNode | Content to display. | | testID | string | Test identifier. |

NavBar.EndSlot

Right-aligned slot for actions and user controls.

Props:

| Prop | Type | Description | | :--- | :--- | :---------- | | children | ReactNode | Content to display. | | testID | string | Test identifier. |

Size Specifications

| Size | Height | Horizontal Padding | | :--- | :----- | :----------------- | | sm | 48px | 12px | | md | 64px | 16px | | lg | 80px | 20px |

Layout Behavior

• StartSlot and EndSlot share flex: 1 for equal width
• Center slot has flex: 2 for prominent positioning
• All slots use flexBasis: 0 for consistent sizing
• Items within slots have 8px gap by default

Accessibility

• Use <nav> elements for navigation link groups
• Provide aria-label for navigation regions
• Ensure interactive elements have proper focus states
• Mobile menu triggers should have aria-expanded state