AisNav

A navigation component which wraps a collection of AisNavItem and/or AisMenu components.

AisNavItem is a component for actionable links or plain text content and has the following props:

• label the text to be displayed for the nav item
• href the external URL
• to the destination when using vue-router's RouterLink or Nuxt's NuxtLink
• icon the icon to display on the left side of the nav item

Note: If neither href nor to props are provided, the nav item will be plain text and will emit a click event when clicked. This can be useful if you'd rather trigger a modal, for example, rather than navigate to a new page

Example Usages

Using Default Slot

Home

Search

Team

Support

Help

<template>
  <AisNav class="gap-8 px-2 border border-ui-gray-100 rounded items-center shadow-lg"
          item-class="items-center gap-2 py-3 px-1 text-secondary hover"
  >
    <AisNavItem label="Home" href="/" :icon="faHome" />
    <AisNavItem label="Search" href="/search" icon="search" />
    <AisNavItem>
      <AisMenu label="Team" icon="group">
        <AisMenuItem label="John Smith"></AisMenuItem>
        <AisMenuItem label="Michael Jackson"></AisMenuItem>
        <AisMenuItem label="Clark Thomas"></AisMenuItem>
        <AisMenuItem label="David Drew"></AisMenuItem>
        <AisMenuItem label="Frank Jones"></AisMenuItem>
        <AisMenuItem label="Baily Freeman"></AisMenuItem>
        <AisMenuItem label="Bo Jackson"></AisMenuItem>

        <AisMenuItem>
          <AisMenu label="DB Team" :icon="faDatabase" dropright>
            <AisMenuItem label="Eric Hudson" icon="user"></AisMenuItem>
            <AisMenuItem label="Jeff Barnes" icon="user"></AisMenuItem>
            <AisMenuItem label="Dave Schau" icon="user"></AisMenuItem>

            <AisMenuItem>
              <AisMenu label="Other" icon="unknown">
                <AisMenuItem label="Other 1"></AisMenuItem>
                <AisMenuItem label="Other 2"></AisMenuItem>
                <AisMenuItem label="Other 3" icon="user"></AisMenuItem>
              </AisMenu>
            </AisMenuItem>
          </AisMenu>
        </AisMenuItem>

        <AisMenuItem>
          <AisMenu label="Students" :icon="faUserGraduate" dropright>
            <AisMenuItem label="Joshua Burbidge" :icon="faUserGraduate"></AisMenuItem>
            <AisMenuItem label="Student 2"></AisMenuItem>
            <AisMenuItem label="Student 3" icon="user"></AisMenuItem>
            <AisMenuItem>
              <AisMenu label="Other" icon="unknown">
                <AisMenuItem label="Other 1"></AisMenuItem>
                <AisMenuItem label="Other 2"></AisMenuItem>
                <AisMenuItem label="Other 3" icon="user"></AisMenuItem>
              </AisMenu>
            </AisMenuItem>
          </AisMenu>
        </AisMenuItem>
      </AisMenu>
    </AisNavItem>
    <AisNavItem label="Support" href="/support" :icon="faHeartbeat"/>
    <AisNavItem label="Help" icon="unknown" @click="handleHelpClick" />
  </AisNav>
</template>


<script setup>
  import { AisNav } from '@ais-public/ais-components';
  import { AisNavItem } from '@ais-public/ais-components';
  import { AisMenu } from '@ais-public/ais-components';
  import { AisMenuItem } from '@ais-public/ais-components';
  import { faHome, faHeartbeat, faUserGraduate, faDatabase } from '@fortawesome/free-solid-svg-icons';
  import { library } from '@fortawesome/fontawesome-svg-core';
  library.add( faHome, faHeartbeat, faUserGraduate, faDatabase )

  const handleHelpClick = (e) => { console.log(`navbarExample.help.click: ${e}`) }
</script>

<script>
export default {
  name: "AisNavExample"
}
</script>

Using Items Prop

Home

Search

Team

Support

Help

<template>
  <div class="flex justify-center">
    <AisNav class="gap-8 px-2 items-center border border-ui-gray-100 rounded shadow-lg"
            item-class="py-3 px-1 gap-2 hover:no-underline hover"
            :items="mainNav"
            dark
    ></AisNav>
  </div>
</template>


<script setup>
  import { AisNav } from '@ais-public/ais-components';
  import { mainNav } from "@/components/nav/examples/nav-examples";
</script>

<script>
export default {
  name: "AisNavItemsProp"
}
</script>