# PlayStation Navbar

> XMB-style cross-media navigation — a sliding category rail, vertical items with a glowing pill cursor, and full arrow-key control.

<demo-playstation-navbar>



</demo-playstation-navbar>

## Installation

```bash
npx shadcn-vue@latest add "https://nxui.geoql.in/r/playstation-navbar.json"
```

## Usage

```vue
<script setup lang="ts">
  import PlaystationNavbar from '~/components/ui/playstation-navbar/PlaystationNavbar.vue';

  const categories = [
    {
      id: 'product',
      label: 'Product',
      icon: 'lucide:settings',
      items: [
        {
          id: 'editor',
          label: 'Editor',
          description: 'Build without code',
          icon: 'lucide:pencil',
        },
        { id: 'api', label: 'API', icon: 'lucide:file-code' },
      ],
    },
  ];
</script>

<template>
  <div class="relative h-150 overflow-hidden bg-sky-700">
    <PlaystationNavbar :categories="categories" />
  </div>
</template>
```

A faithful PS3/PSP cross-media-bar: the horizontal category rail slides so
the active category always sits on the cross column — its icon brightens
into a glowing white tile. Sub-items hang vertically beneath it, and a
frosted pill cursor springs between rows, with the active item's label
swelling and its description unfurling beneath a hairline. Arrow keys
navigate (←/→ categories, ↑/↓ items); clicking works too. On small
screens labels collapse below the cross to keep the rail centered.

## Props

<table>
<thead>
  <tr>
    <th>
      Prop
    </th>
    
    <th>
      Type
    </th>
    
    <th>
      Default
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        categories
      </code>
    </td>
    
    <td>
      <code>
        PlaystationNavbarCategory[]
      </code>
    </td>
    
    <td>
      —
    </td>
    
    <td>
      The cross-bar tree
    </td>
  </tr>
</tbody>
</table>

### PlaystationNavbarCategory

<table>
<thead>
  <tr>
    <th>
      Field
    </th>
    
    <th>
      Type
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        id
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      Unique id
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        label
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      Shown under the active icon
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        icon
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      Iconify name for the rail
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        items
      </code>
    </td>
    
    <td>
      <code>
        PlaystationNavbarItem[]
      </code>
    </td>
    
    <td>
      Vertical entries
    </td>
  </tr>
</tbody>
</table>

### PlaystationNavbarItem

<table>
<thead>
  <tr>
    <th>
      Field
    </th>
    
    <th>
      Type
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        id
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      Unique id
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        label
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      Item label
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        description
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      Line revealed while selected
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        icon
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      Iconify name (rail + cursor pill)
    </td>
  </tr>
</tbody>
</table>

## Events

<table>
<thead>
  <tr>
    <th>
      Event
    </th>
    
    <th>
      Payload
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        select
      </code>
    </td>
    
    <td>
      <code>
        (categoryId: string, itemId: string)
      </code>
    </td>
    
    <td>
      Item selected
    </td>
  </tr>
</tbody>
</table>

## Credits

Ported from the PlayStation-style navbar by
[@ozzyxs1a](https://x.com/ozzyxs1a/status/2075952407347913043).