Nav

Display a navigation.

Usage

Use the compositional components CNav & CNavItem to compose the navigation.

NavItem

The root component of CNavItem is a NuxtLink component, so all NuxtLink props can be used and will be inherited. If required, the component has an active prop which will apply the same active styles utilise by the native NuxtLink exact-active-class prop.

You can also use the icon prop or slot to prepend an icon.

<template>
  <CNav>
    <CNavItem to="/">
      <template #icon>
        <CIcon
          name="i-heroicons-solid-home"
        />
      </template>
      Home
    </CNavItem>
    <CNavItem to="/components/alert">
      <template #icon>
        <CIcon
          name="i-heroicons-solid-exclamation"
        />
      </template>
      Alert
    </CNavItem>
    <CNavItem
      to="/components/nav"
      disabled
    >
      <template #icon>
        <CIcon
          name="i-heroicons-solid-cog"
        />
      </template>
      Nav
    </CNavItem>
  </CNav>
</template>

Nested active

If the nested prop is specified, the NavItem will be active for all routes that begin with the route specified in the to prop.

<template>
  <CNav>
    <CNavItem to="/">
      <template #icon>
        <CIcon
          name="i-heroicons-solid-home"
        />
      </template>
      Home
    </CNavItem>
    <CNavItem to="/components/alert">
      <template #icon>
        <CIcon
          name="i-heroicons-solid-exclamation"
        />
      </template>
      Alert
    </CNavItem>
    <CNavItem to="/components/nav">
      <template #icon>
        <CIcon
          name="i-heroicons-solid-cog"
        />
      </template>
      Nav
    </CNavItem>
    <CNavItem
      to="/components"
      nested
    >
      <template #icon>
        <CIcon
          name="i-heroicons-solid-cog"
        />
      </template>
      Test nested
    </CNavItem>
  </CNav>
</template>

Props

NavItem

to
string | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric
activeClass
string
exactActiveClass
string
ariaCurrentValue
"page" | "step" | "location" | "date" | "time" | "true" | "false"
target
"_self" | "_blank" | "_parent" | "_top" | (string & {})
href
string | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric
icon
string
rel
(string & {}) | "noopener" | "noreferrer" | "nofollow" | "sponsored" | "ugc"
"noopener""noreferrer""nofollow""sponsored""ugc"
prefetchedClass
string
prefetchOn
unknown
nested
boolean
false
replace
boolean
custom
boolean
viewTransition
boolean
disabled
boolean
external
boolean
noRel
boolean
prefetch
boolean
noPrefetch
boolean
active
boolean