# Card Nav

> A navigation bar that springs open into a row of cards, each with its own links.

A navigation bar that springs open into a row of cards, each with its own links. Click Menu (or hover the bar with `open-on="hover"`) and the bar grows; the cards rise, unfold or fade in one after another. Link arrows slide on hover. Below 560px the cards stack and the button moves to the bottom of the menu.

<demo-card-nav>



</demo-card-nav>

## Installation

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

## Usage

```vue
<script setup lang="ts">
  import { CardNav } from '~/components/ui/card-nav';
  import type { CardNavItem } from '~/components/ui/card-nav';

  const items: CardNavItem[] = [
    {
      label: 'About',
      description: 'The people and the story behind the studio.',
      links: [
        { label: 'Company', href: '/company' },
        { label: 'Careers', href: '/careers' },
      ],
    },
    {
      label: 'Contact',
      bgColor: '#ff5a1f',
      textColor: '#121016',
      links: [{ label: 'Email', href: 'mailto:hi@acme.dev' }],
    },
  ];
</script>

<template>
  <CardNav
    logo="/logo.svg"
    logo-alt="Acme"
    :items="items"
    :cta="{ label: 'Get started', href: '/signup' }"
    :link-component="NuxtLink"
    card-effect="unfold"
  />
</template>
```

Use the `logo` slot instead of the `logo` prop to render your own mark. Pass `v-model:open` to control the menu from outside.

## Props

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

<tbody>
  <tr>
    <td>
      <code>
        items
      </code>
    </td>
    
    <td>
      <code>
        CardNavItem[]
      </code>
    </td>
    
    <td>
      3 sample cards
    </td>
    
    <td>
      The cards. <code>
        label
      </code>
      
      , <code>
        description?
      </code>
      
      , <code>
        bgColor?
      </code>
      
      , <code>
        textColor?
      </code>
      
      , <code>
        links?
      </code>
      
      .
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        logo
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        ''
      </code>
    </td>
    
    <td>
      Image URL shown in the middle of the bar.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        logo-alt
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        'Logo'
      </code>
    </td>
    
    <td>
      Accessible label for the logo link.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        logo-href
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        '#'
      </code>
    </td>
    
    <td>
      Where the logo links to.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        cta
      </code>
    </td>
    
    <td>
      <code>
        CardNavCta
      </code>
    </td>
    
    <td>
      —
    </td>
    
    <td>
      Button on the right (<code>
        label
      </code>
      
      , <code>
        href?
      </code>
      
      , <code>
        onClick?
      </code>
      
      ). Moves to the menu when narrow.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        theme
      </code>
    </td>
    
    <td>
      <code>
        'dark' | 'light'
      </code>
    </td>
    
    <td>
      <code>
        'dark'
      </code>
    </td>
    
    <td>
      Color scheme of the bar, cards and button.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        surface
      </code>
    </td>
    
    <td>
      <code>
        'glass' | 'solid'
      </code>
    </td>
    
    <td>
      <code>
        'glass'
      </code>
    </td>
    
    <td>
      Frosted glass that blurs what is behind, or an opaque fill.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        open-on
      </code>
    </td>
    
    <td>
      <code>
        'click' | 'hover'
      </code>
    </td>
    
    <td>
      <code>
        'click'
      </code>
    </td>
    
    <td>
      Opens from the button, or as soon as the pointer moves over the bar.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        card-effect
      </code>
    </td>
    
    <td>
      <code>
        'rise' | 'unfold' | 'fade'
      </code>
    </td>
    
    <td>
      <code>
        'rise'
      </code>
    </td>
    
    <td>
      How the cards arrive: rising, folding down from the bar, or fading in from a blur.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        stagger
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.12
      </code>
    </td>
    
    <td>
      How far each card trails the one before it, from 0 to 0.3.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        bounce
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.2
      </code>
    </td>
    
    <td>
      How much the menu overshoots as it opens, from 0 to 1.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        speed
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      Speed of the open and close animation.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        card-height
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        176
      </code>
    </td>
    
    <td>
      Minimum card height, in px.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        max-width
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        800
      </code>
    </td>
    
    <td>
      Maximum width of the bar, in px.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        accent-color
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      —
    </td>
    
    <td>
      Button color. Its label picks black or white for contrast.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        menu-label
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        true
      </code>
    </td>
    
    <td>
      Shows Menu / Close next to the icon, rolling between them.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        intro
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        true
      </code>
    </td>
    
    <td>
      Unrolls the bar from its center on mount.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        default-open
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        false
      </code>
    </td>
    
    <td>
      Starts with the menu open.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        open
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      —
    </td>
    
    <td>
      Controlled open state. Use with <code>
        v-model:open
      </code>
      
      .
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        link-component
      </code>
    </td>
    
    <td>
      <code>
        string | Component
      </code>
    </td>
    
    <td>
      <code>
        'a'
      </code>
    </td>
    
    <td>
      Renders links, e.g. <code>
        NuxtLink
      </code>
      
      . Receives <code>
        href
      </code>
      
      . Links without <code>
        href
      </code>
      
       are buttons.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        aria-label
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        'Main'
      </code>
    </td>
    
    <td>
      Accessible name of the nav landmark.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        class
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        ''
      </code>
    </td>
    
    <td>
      Extra classes for the root.
    </td>
  </tr>
</tbody>
</table>

## Events / Slots

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

<tbody>
  <tr>
    <td>
      <code>
        update:open
      </code>
    </td>
    
    <td>
      <code>
        open: boolean
      </code>
    </td>
    
    <td>
      The menu opened or closed.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        link-click
      </code>
    </td>
    
    <td>
      <code>
        link: CardNavLink, item: CardNavItem, event: MouseEvent
      </code>
    </td>
    
    <td>
      A card link was clicked. The menu closes afterwards.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        #logo
      </code>
    </td>
    
    <td>
      —
    </td>
    
    <td>
      Custom logo markup in place of the <code>
        logo
      </code>
      
       image.
    </td>
  </tr>
</tbody>
</table>

## Accessibility

- The bar is a `<nav>` landmark. The menu button sets `aria-expanded` and `aria-controls`; the card area is `aria-hidden` and its links leave the tab order while closed.
- Escape closes the menu and returns focus to the menu button. A pointer press outside closes it too.
- With `menu-label` off, the button gets an `aria-label` of "Open menu" / "Close menu".
- With `prefers-reduced-motion: reduce`, the menu opens without a spring, the intro is skipped and the icon and arrow transitions are off.
- Ported from [React Bits](https://reactbits.dev/components/card-nav) by David Haz.