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">
      <template #icon>
        <CIcon
          name="i-heroicons-solid-cog"
        />
      </template>
      Nav
    </CNavItem>
  </CNav>
</template>

Nested active

A composable is provided useNestedRoutes to detect nested routes. For example, this is useful if your page has a seperate nested navigation in which you want to the NavItem to remain active.

The composable takes a path with the RouteLocationRaw type and will detect if the currently active route starts with the given path.

<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"
      :active="useNestedRoutes('/components')"
    >
      <template #icon>
        <CIcon
          name="i-heroicons-solid-cog"
        />
      </template>
      Test nested
    </CNavItem>
  </CNav>
</template>

Props

NavItem

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