Skip to content


🙋‍♀️ How to use these example?

Just copy the code snippet and paste it into your project. Sometimes it's useful to create a new component and use it in a higher level component like a page or a layout.

Simple navigation

Preview for small screen size
<script setup lang="ts">
const { loadNavigationElements, navigationElements } = useNavigation();
await loadNavigationElements({ depth: 2 });

const { path: currentPath } = useRoute();

const isActive = (path: string) => {
  return "/" + path === currentPath;

  <div class="w-full shadow-lg mb-10 bg-white fixed">
      class="w-full flex flex-col divide-gray-200 divide-y md:flex-row md:max-w-screen-xl md:mx-auto md:divide-y-0 md:divide-x"
        v-for="navigationElement in navigationElements"
        :to="'/' + navigationElement.seoUrls[0]?.seoPathInfo"
          class="flex p-4 h-full border-l-5 hover:border-gray-200 md:border-l-none md:border-b-5 md:w-60 transition duration-200 items-center"
              ? 'border-indigo-500'
              : 'border-white',
          {{ }}