Nav

Display a navigation.

Usage

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

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

Props

NavItem

Prop	Default	Type
`icon`		`string`
`nested`	`false`	`boolean`
`active`		`boolean`
`disabled`		`boolean`
`custom`		`false` Whether RouterLink should not wrap its content in an a tag. Useful when using v-slot to create a custom RouterLink
`to`		`string \| RouteLocationAsRelativeGeneric \| RouteLocationAsPathGeneric` Route Location the link should navigate to when clicked on.
`target`		`null \| "_self" \| "_blank" \| "_parent" \| "_top" \| string & {}` Where to display the linked URL, as the name for a browsing context.
`trailingSlash`		`"append" \| "remove"` An option to either add or remove trailing slashes in the href for this specific link. Overrides the global trailingSlash option if provided.