# Frosted Navigation

> Bottom navigation where content melts into a progressive frosted-glass gradient — stacked backdrop blurs, a serif search pill, and spring-animated tabs.

<demo-frosted-navigation>



</demo-frosted-navigation>

## Installation

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

## Usage

```vue
<script setup lang="ts">
  import { ref } from 'vue';
  import FrostedNavigation from '~/components/ui/frosted-navigation/FrostedNavigation.vue';

  const active = ref('everything');
  const query = ref('');

  const tabs = [
    { id: 'everything', label: 'Everything', icon: 'lucide:layout-grid' },
    { id: 'spaces', label: 'Spaces', icon: 'lucide:circle' },
    { id: 'serendipity', label: 'Serendipity', icon: 'lucide:sparkles' },
  ];
</script>

<template>
  <div class="relative h-150 overflow-hidden">
    <div class="h-full overflow-y-auto">
      <!-- scrolling content -->
    </div>
    <FrostedNavigation
      v-model="active"
      v-model:query="query"
      :tabs="tabs"
      accent="#f43f16"
      :frost-height="220"
    />
  </div>
</template>
```

The frost is six stacked `backdrop-blur` strips with staggered gradient
masks (1px → 28px), so scrolling content dissolves progressively instead
of hitting a hard blur edge — the effect from mymind's mobile app. On top
sit a serif italic search pill (`v-model:query`, `submit` event) and a
spring-animated tab bar (`v-model` active id). Position it absolutely
inside any relative scroll container.

## Props

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

<tbody>
  <tr>
    <td>
      <code>
        v-model
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      —
    </td>
    
    <td>
      Active tab id
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        v-model:query
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        ''
      </code>
    </td>
    
    <td>
      Search input value
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        tabs
      </code>
    </td>
    
    <td>
      <code>
        FrostedNavigationTab[]
      </code>
    </td>
    
    <td>
      —
    </td>
    
    <td>
      Tab definitions
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        placeholder
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        'Search my mind...'
      </code>
    </td>
    
    <td>
      Search pill placeholder
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        accent
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        '#f43f16'
      </code>
    </td>
    
    <td>
      Active tab color
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        frost-height
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        220
      </code>
    </td>
    
    <td>
      Frost zone height in pixels
    </td>
  </tr>
</tbody>
</table>

### FrostedNavigationTab

<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 tab id
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        label
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      Tab label
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        icon
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      Iconify name, e.g. <code>
        lucide:sparkles
      </code>
    </td>
  </tr>
</tbody>
</table>

## Events

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

<tbody>
  <tr>
    <td>
      <code>
        submit
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      Search pill submitted (Enter)
    </td>
  </tr>
</tbody>
</table>

## Credits

Frosted navigation concept from [mymind](https://mymind.com), shared by
[@vanschneider](https://x.com/vanschneider/status/2074817942286418325).