The Navigation component provides a responsive sidebar navigation that supports both full and mini (collapsed) modes. It automatically adapts to mobile devices with slide-in behavior and backdrop overlay, and integrates seamlessly with the App component for coordinated navigation management. Perfect for creating main application navigation, sidebars, and hierarchical navigation structures.

The Navigation component creates a sidebar navigation panel. On desktop, it can be toggled between full and mini modes. On mobile, it slides in from the left when opened.

Source code

<template>
  <IkApp style="position: relative; height: 400px; border: 1px dashed var(--border-neutral-regular-default); overflow: hidden">
    <IkNavigation v-model:open="navOpen" style="position: absolute">
      <template #top>
        <div class="ik-pa-10 ik-text-center">
          <div class="ik-text--lg">My App</div>
        </div>
      </template>
      <IkNavigationItem link="#" icon="home">
        Dashboard
      </IkNavigationItem>
      <IkNavigationItem link="#" icon="folder">
        Projects
        <template #children>
          <IkNavigationItem link="#" icon="folder">
            Project 1
          </IkNavigationItem>
          <IkNavigationItem link="#" icon="folder">
            Project 2
          </IkNavigationItem>
        </template>
      </IkNavigationItem>
      <IkNavigationItem link="#" icon="users">
        Team
      </IkNavigationItem>
      <IkNavigationItem link="#" icon="cog">
        Settings
      </IkNavigationItem>
    </IkNavigation>
    <IkFlex spacing="4" justify_center align_center column style="height: 400px;">
      <IkButton @click="navOpen = !navOpen">Toggle Navigation</IkButton>
    </IkFlex>
  </IkApp>
</template>
<script setup>
import { IkApp } from '@ikol/ui-kit/components/IkApp';
import { IkNavigation } from '@ikol/ui-kit/components/IkNavigation';
import { IkNavigationItem } from '@ikol/ui-kit/components/IkNavigation';
import { IkIcon } from '@ikol/ui-kit/components/IkIcon';
import { IkButton } from '@ikol/ui-kit/components/IkButton';
import { IkFlex } from '@ikol/ui-kit/components/IkFlex';
import { ref } from 'vue';

const navOpen = ref(true);
</script>

Mini mode

In mini mode, the navigation collapses to show only icons, making it ideal for saving horizontal space while maintaining quick access to navigation items.

Source code

<template>
  <IkApp style="position: relative; height: 400px; border: 1px dashed var(--border-neutral-regular-default); overflow: hidden">
    <IkNavigation v-model:open="navOpen" v-model:mini="navMini" style="position: absolute">
      <template #top>
        <div class="ik-pa-7">
          <div style="width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; align-items: center; justify-content: center; color: white; font-size: 16px; font-weight: bold;">
            JD
          </div>
        </div>
      </template>
      <IkNavigationItem circle link="#" icon="home" hide_label>
        Dashboard
      </IkNavigationItem>
      <IkNavigationItem link="#" icon="folder" hide_label>
        Projects
      </IkNavigationItem>
      <IkNavigationItem link="#" icon="users" hide_label>
        Team
      </IkNavigationItem>
      <IkNavigationItem link="#" icon="cog" hide_label>
        Settings
      </IkNavigationItem>
      <template #bottom>
        <IkNavigationItem @click="navMini = !navMini" :icon="navMini ? 'chevron-right' : 'chevron-left'" hide_label></IkNavigationItem>
      </template>
    </IkNavigation>
  </IkApp>
</template>
<script setup>
import { IkApp } from '@ikol/ui-kit/components/IkApp';
import { IkNavigation } from '@ikol/ui-kit/components/IkNavigation';
import { IkNavigationItem } from '@ikol/ui-kit/components/IkNavigation';
import { IkIcon } from '@ikol/ui-kit/components/IkIcon';
import { IkButton } from '@ikol/ui-kit/components/IkButton';
import { IkFlex } from '@ikol/ui-kit/components/IkFlex';
import { ref } from 'vue';

const navOpen = ref(true);
const navMini = ref(true);
</script>

Use the secondary prop to create nested or secondary navigation panels that don't register with the App component and have different styling behavior.

Source code

<template>
  <IkApp style="position: relative; height: 400px; border: 1px dashed var(--border-neutral-light-default); display: flex; overflow: hidden">
    <IkNavigation open mini style="position: absolute">
      <template #top>
        <div class="ik-pa-7">
          <div style="width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; align-items: center; justify-content: center; color: white; font-size: 16px; font-weight: bold;">
            JD
          </div>
        </div>
      </template>
      <IkNavigationItem circle link="#" icon="home" hide_label>
        Dashboard
      </IkNavigationItem>
      <IkNavigationItem link="#" icon="folder" hide_label>
        Projects
      </IkNavigationItem>
      <IkNavigationItem link="#" icon="users" hide_label>
        Team
      </IkNavigationItem>
      <IkNavigationItem link="#" icon="cog" hide_label>
        Settings
      </IkNavigationItem>
    </IkNavigation>
    
    <IkNavigation secondary style="height: 100%; border-right: 1px solid var(--border-neutral-light-default);">
      <IkNavigationItem link="#">
        Sub Item 1
      </IkNavigationItem>
      <IkNavigationItem link="#">
        Sub Item 2
      </IkNavigationItem>
      <IkNavigationItem link="#">
        Sub Item 3
      </IkNavigationItem>
    </IkNavigation>
  </IkApp>
</template>
<script setup>
import { IkApp } from '@ikol/ui-kit/components/IkApp';
import { IkNavigation } from '@ikol/ui-kit/components/IkNavigation';
import { IkNavigationItem } from '@ikol/ui-kit/components/IkNavigation';
import { IkIcon } from '@ikol/ui-kit/components/IkIcon';
import { IkButton } from '@ikol/ui-kit/components/IkButton';
import { IkFlex } from '@ikol/ui-kit/components/IkFlex';
import { ref } from 'vue';
</script>

Secondary mini variant

Use the secondary prop with the mini prop to create nested or secondary navigation panels that don't register with the App component and have different styling behavior.

Source code

<template>
  <IkApp style="position: relative; height: 400px; border: 1px dashed var(--border-neutral-light-default); display: flex; overflow: hidden">
    <IkNavigation open mini style="position: absolute">
      <template #top>
        <div class="ik-pa-7">
          <div style="width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; align-items: center; justify-content: center; color: white; font-size: 16px; font-weight: bold;">
            JD
          </div>
        </div>
      </template>
      <IkNavigationItem circle link="#" icon="home" hide_label>
        Dashboard
      </IkNavigationItem>
      <IkNavigationItem link="#" icon="folder" hide_label>
        Projects
      </IkNavigationItem>
      <IkNavigationItem link="#" icon="users" hide_label>
        Team
      </IkNavigationItem>
      <IkNavigationItem link="#" icon="cog" hide_label>
        Settings
      </IkNavigationItem>
    </IkNavigation>
    
    <IkNavigation secondary mini style="height: 100%; border-right: 1px solid var(--border-neutral-light-default);">
      <IkNavigationItem link="#" icon="folder">
        Sub Item 1
      </IkNavigationItem>
      <IkNavigationItem link="#" icon="folder">
        Sub Item 2
      </IkNavigationItem>
      <IkNavigationItem link="#" icon="folder">
        Sub Item 3
      </IkNavigationItem>
    </IkNavigation>
  </IkApp>
</template>
<script setup>
import { IkApp } from '@ikol/ui-kit/components/IkApp';
import { IkNavigation } from '@ikol/ui-kit/components/IkNavigation';
import { IkNavigationItem } from '@ikol/ui-kit/components/IkNavigation';
import { IkIcon } from '@ikol/ui-kit/components/IkIcon';
import { IkButton } from '@ikol/ui-kit/components/IkButton';
import { IkFlex } from '@ikol/ui-kit/components/IkFlex';
import { ref } from 'vue';
</script>

Navigation

Basic navigation

Mini mode

Secondary navigation

Secondary mini variant