about
Thin
cards
ChecksCompareImageMinimalplainSteps
contact
Address
core
Consent
footer
Slim
hero
Bigcentral
lists
Panel
nav
Slimslim Desktopslim MobileSpringSpring DesktopSpring Mobile
sections
Problem SolutionSimple
text
largeParagraph

Theme Customizer

v1.0

slim Desktop nav

Top navigation bar with brand logo, desktop links with optional highlighted pill style, and a mobile hamburger button that emits a toggleMobile event. Uses design tokens for typography and color.

navigationnavbarui
Props showhide
PropTypeDefault / Req.Description
logoStringYour logoThe text or branding rendered as the home link/logo. Can be replaced via the 'logo' slot.
linksArrayrequiredA list of navigation links to display in the desktop menu. Each link must have 'path' and 'name' as strings. Optionally, 'highlight' can be set to true to style the link as a primary button.
Sub-propTypeDefault / Req.Description
pathStringrequiredThe route or URL the link navigates to.
nameStringrequiredThe visible text for the navigation link.
highlightBoolean—Whether this link should be styled as a primary/highlighted button.
Slots showhide
  • logo — Custom markup to replace the default logo/home link content.
Emits showhide
EventDescription
toggleMobileEmitted when the mobile menu toggle button is clicked.

Get the code!

License Summary

You may use these UI components in your own personal or commercial projects. You may not resell, redistribute, sublicense, or package them as standalone assets or template/library packs.

Full terms: End-User License Agreement

Below you can expand the main implementation file and any supporting components. Use the “Copy” button to grab a snippet straight to your clipboard.

1 Copy raw components

These are the raw components that are required to run this example. Copy-paste them into your project. Most likely you will not change anything in these files, but you can if you want to. These are the components that are used in the main implementation file.

slimDesktop.vue
<script setup>
const emit = defineEmits(["toggleMobile"]);
const props = defineProps({
  logo: {
    type: String,
    default: "Your logo",
  },
  links: {
    type: Array,
    required: true,
    validator: (v) => {
      return v.every((link) => {
        return typeof link.path === "string" && typeof link.name === "string";
      });
    },
  },
});
</script>
<template>
  <nav
    class="flex items-center justify-between w-full font-iq-paragraph leading-iq-paragraph tracking-iq-paragraph text-iq-paragraph-color"
  >
    <!-- Logo / Home Link -->
    <NuxtLink
      to="/"
      class="text-3xl md:text-4xl font-black drop-shadow-lg font-iq-header leading-iq-header tracking-iq-header text-iq-header-color"
    >
      <slot name="logo">{{ logo }}</slot>
    </NuxtLink>

    <!-- Nav Links (desktop) -->
    <div class="hidden md:flex items-center gap-6 ">
      <template v-for="(link, index) in links" :key="index">
        <NuxtLink
          :to="link.path"
          :class="{
            'text-center text-iq-paragraph-color/80 hover:text-iq-paragraph-color px-6 py-3 rounded-full bg-white/10 backdrop-blur-lg ring-1 ring-white/20 hover:bg-white/20 hover:ring-white/40 transition text-sm font-semibold uppercase': link.highlight,
            'text-sm font-semibold uppercase text-iq-paragraph-color/80 hover:text-iq-paragraph-color  transition': !link.highlight
          }"
        >
          {{ link.name }}
        </NuxtLink>

      </template>
    </div>

    <!-- Hamburger (mobile) -->

    <button
      @click="emit('toggleMobile')"
      class="p-2 rounded-lg bg-white/10 hover:bg-white/20 transition md:hidden"
      aria-label="Open menu"
    >
      <!-- Hamburger Icon -->
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="h-6 w-6 text-white/80"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M4 6h16M4 12h16M4 18h16"
        />
      </svg>
    </button>
  </nav>
</template>

2 Copy main implementation file

This is the main Vue file that uses the component. Copy-paste this into your project. In this code feel free to change anything you like, such as the component name, props, or class. This is the place where you control the main component.

slimDesktop.vue
<script setup>
const links = [
  { name: "Home", path: "/" },
  { name: "Learn More", path: "/learn-more" },
  { name: "Get Started", path: "/get-started" },
  { name: "Components", path: "/components", highlight: true },
];

function toggleMobile() {
  alert('Mobile menu toggled');
}
</script>
<template>
  <NavSlimDesktop
    class="max-w-7xl mx-auto px-6 py-8"
    :links="links"
    @toggleMobile="toggleMobile"
    logo="Flex Ui Lib"
  />
</template>

3 Apply your styles

Decide whether you want a global design-system  or a one-off inline snippet.

Full design system

Complete @theme block – import once and share across every component.

Use when:

  • You want to use multiple components across your site, and you want them to match your design system.
  • You want to change the design of all components at once.

How to use:

Copy the code below into main.css file. It is most likely in assets/css/main.css directory.

Single component

:style binding – paste straight onto any of ours components.

Use when:

  • You want to use a single component without affecting the rest of your design system.
  • You already use multiple components but you want this one to have a different style.

How to use:

Copy the code below and paste it into the :style binding of the component.

4 Manual Actions

I wish I could automate every little thing—but for now you’ll need to handle these final steps by hand. Apologies for the extra work!

Paste your chosen iq-card-* style

Now that you’ve picked a card preset, copy its CSS into your @layer components block in main.css. This ensures every `iq-card` wrapper will look just right.

Copy or customize iq-cta

iq-cta is the main call to action button class. It’s used in many places across the components. But for now it is only a single class that you can customize. You can copy the code below and paste it into your @layer components block in main.css. In future you will be able to fully customize it from our UI and choose from many presets.

3. Audit forms & inputs if you used any

I didn't have time to figure out consistency. Although there are no actions required, be mindful that the forms might not be entirely consistent with the design system. A quick once-over will keep everything looking sharp.