Primary navigation

The primary navigation component is the main navigation of any dashboard, intended to allow users to navigate between different apps or external links.

Usage

Use CiPrimaryNavigationItem's and their props to construct your menu.

Use the tooltip-text prop to give your items a tooltip. This can be useful for letting users know what app the icon corresponds to.

<template>
  <ci-primary-navigation>
    <ci-primary-navigation-item
      tooltip-text="Home"
      icon="home"
      @click="selectedItem = 'home'"
      :active="selectedItem === 'home'"
    />
    <ci-primary-navigation-item
      tooltip-text="Calendar"
      icon="calendar"
      @click="selectedItem = 'calendar'"
      :active="selectedItem === 'calendar'"
    />
    <ci-primary-navigation-item
      tooltip-text="Comment"
      icon="comment"
      @click="selectedItem = 'comment'"
      :active="selectedItem === 'comment'"
    />
  </ci-primary-navigation>
</template>
<script>
export default {
  data () {
    return {
      selectedItem: 'home'
    }
  }
}
</script>

Variants

Variant prop can be used to change appearance of primary navigation. Available options are normal and dark. Default is normal.

<template>
  <DemoGrid>
    <ci-primary-navigation>
      <ci-primary-navigation-item
        tooltip-text="Home"
        icon="home"
        @click="selectedItem = 'home'"
        :active="selectedItem === 'home'"
      />
      <ci-primary-navigation-item
        tooltip-text="Calendar"
        icon="calendar"
        @click="selectedItem = 'calendar'"
        :active="selectedItem === 'calendar'"
      />
      <ci-primary-navigation-item
        tooltip-text="Comment"
        icon="comment"
        @click="selectedItem = 'comment'"
        :active="selectedItem === 'comment'"
      />
    </ci-primary-navigation>
    <ci-primary-navigation variant="dark">
      <ci-primary-navigation-item
        tooltip-text="Home"
        icon="home"
        @click="selectedItemDark = 'home'"
        :active="selectedItemDark === 'home'"
        variant="dark"
      />
      <ci-primary-navigation-item
        tooltip-text="Calendar"
        icon="calendar"
        @click="selectedItemDark = 'calendar'"
        :active="selectedItemDark === 'calendar'"
        variant="dark"
      />
      <ci-primary-navigation-item
        tooltip-text="Comment"
        icon="comment"
        @click="selectedItemDark = 'comment'"
        :active="selectedItemDark === 'comment'"
        variant="dark"
      />
    </ci-primary-navigation>
  </DemoGrid>
</template>
<script>
export default {
  data () {
    return {
      selectedItem: 'home',
      selectedItemDark: 'home'
    }
  }
}
</script>

Logo

Logo prop can be used to change the logo of the primary navigation. The default is Cirrus Insight Logo.

<template>
  <DemoGrid>
    <ci-primary-navigation>
      <ci-primary-navigation-item
        tooltip-text="Home"
        icon="home"
        @click="selectedItem = 'home'"
        :active="selectedItem === 'home'"
      />
      <ci-primary-navigation-item
        tooltip-text="Calendar"
        icon="calendar"
        @click="selectedItem = 'calendar'"
        :active="selectedItem === 'calendar'"
      />
      <ci-primary-navigation-item
        tooltip-text="Comment"
        icon="comment"
        @click="selectedItem = 'comment'"
        :active="selectedItem === 'comment'"
      />
    </ci-primary-navigation>
    <ci-primary-navigation :logo="customLogo">
      <ci-primary-navigation-item
        tooltip-text="Home"
        icon="home"
        @click="selectedItemDark = 'home'"
        :active="selectedItemDark === 'home'"
      />
      <ci-primary-navigation-item
        tooltip-text="Calendar"
        icon="calendar"
        @click="selectedItemDark = 'calendar'"
        :active="selectedItemDark === 'calendar'"
      />
      <ci-primary-navigation-item
        tooltip-text="Comment"
        icon="comment"
        @click="selectedItemDark = 'comment'"
        :active="selectedItemDark === 'comment'"
      />
    </ci-primary-navigation>
  </DemoGrid>
</template>
<script>
export default {
  data () {
    return {
      selectedItem: 'home',
      selectedItemDark: 'home',
      customLogo: {
        imageSrc: 'https://play-lh.googleusercontent.com/SWbS8z3NqFVHCEQc_6l-ZDdDj5qPGrWSK8hEWRSPHYm9s8958y6nTnoLolVHXlgKfXw',
        imageAlt: 'Custom Logo',
        imageTitle: 'Custom Logo'
      }
    }
  }
}
</script>

Multiple menus

If desired, larger menus can be grouped into multiple menus. Use the more slot to separate your menus.

<template>
  <ci-primary-navigation>
    <ci-primary-navigation-item
      tooltip-text="Home"
      icon="home"
      @click="selectedItem = 'home'"
      :active="selectedItem === 'home'"
    />
    <ci-primary-navigation-item
      tooltip-text="Calendar"
      icon="calendar"
      @click="selectedItem = 'calendar'"
      :active="selectedItem === 'calendar'"
    />
    <ci-primary-navigation-item
      tooltip-text="Comment"
      icon="comment"
      @click="selectedItem = 'comment'"
      :active="selectedItem === 'comment'"
    />
    <template #more>
      <ci-primary-navigation-item
        tooltip-text="Settings"
        icon="settings"
        @click="selectedItem = 'settings'"
        :active="selectedItem === 'settings'"
      />
    </template>
  </ci-primary-navigation>
</template>
<script>
export default {
  data () {
    return {
      selectedItem: 'home'
    }
  }
}
</script>

Popovers

Sometimes, an item in a menu may present a popover instead of navigating to a route or URL. When that happens, the item should not present a tooltip, to avoid confusion between seeing a tooltip be replaced by a popover. This means special care should be given to items opening a popover, as the icon should be clear enough to communicate what it is without the need for a tooltip.

Here, the info item opens a popover.

<template>
  <ci-primary-navigation>
    <ci-primary-navigation-item
      tooltip-text="Home"
      icon="home"
      @click="selectedItem = 'home'"
      :active="selectedItem === 'home'"
    />
    <ci-primary-navigation-item
      tooltip-text="Calendar"
      icon="calendar"
      @click="selectedItem = 'calendar'"
      :active="selectedItem === 'calendar'"
    />
    <ci-primary-navigation-item
      tooltip-text="Comment"
      icon="comment"
      @click="selectedItem = 'comment'"
      :active="selectedItem === 'comment'"
    />
    <template #more>
      <ci-primary-navigation-item
        tooltip-text="Settings"
        icon="settings"
        @click="selectedItem = 'settings'"
        :active="selectedItem === 'settings'"
      />
      <ci-popover
        @open="selectedItem = 'info'"
        @close="selectedItem = ''"
        placement="right-start"
      >
        <template #action="popover">
          <ci-primary-navigation-item
            tooltip-text="Test"
            icon="info"
            @click="popover.toggle()"
            :focused="selectedItem === 'info'"
          />
        </template>
        Popover content.
      </ci-popover>
    </template>
  </ci-primary-navigation>
</template>
<script>
export default {
  data () {
    return {
      selectedItem: 'home'
    }
  }
}
</script>

Secondary menu

Primary navigation can be integrated with secondary navigation. To use it put ci-secondary-navigation component in the same parent container as the primary navigation and pass required props to it.

<template>
  <div style="display: flex; flex-direction: row;">
    <ci-primary-navigation>
      <ci-primary-navigation-item
        v-for="item in primaryNavigation"
        :key="item.id"
        :icon="item.icon"
        :active="item.active"
        :tooltip-text="item.tooltipText"
        @click="activatePrimaryItem(item.id)"
      />
    </ci-primary-navigation>
    <ci-secondary-navigation
      :title="secondaryNavigation.title"
      :items="secondaryNavigation.items"
    />
  </div>
</template>

<script>
export default {
  data() {
    const ref = this;
    return {
      activeItem: '',
      primaryNavigation: [
        {
          id: 'home',
          icon: 'home',
          tooltipText: 'Home',
          active: false,
          secondaryNavigation: {
            title: 'Home',
            items: [
              { id: 'dashboard', text: 'Dashboard', onClick: function() { ref.activateSecondaryItem('dashboard') }, active: false },
              { id: 'analytics', text: 'Analytics', onClick: function() { ref.activateSecondaryItem('analytics') }, active: false },
              { id: 'settings', text: 'Settings', onClick: function() { ref.activateSecondaryItem('settings') }, active: false },
            ],
          },
        },
         {
          id: 'calendar',
          icon: 'calendar',
          tooltipText: 'Calendar',
          active: false,
          secondaryNavigation: {
            title: 'Calendar',
            items: [
              { id: 'prep', text: 'Meeting Prep', onClick: function() { ref.activateSecondaryItem('prep') }, active: false },
              { id: 'settings', text: 'Settings', onClick: function() { ref.activateSecondaryItem('settings') }, active: false },
            ],
          },
        },
      ],
      secondaryNavigation: {
        title: '',
        items: []
      },
    }
  },
  methods: {
    activatePrimaryItem(itemId) {
      if (this.activeItem.id !== itemId) {
        if (this.activeItem) this.activeItem.active = false
        const newActiveItem = this.primaryNavigation.find(item => item.id === itemId)
        this.activeItem = newActiveItem;
        newActiveItem.active = true;

        this.secondaryNavigation = newActiveItem.secondaryNavigation
        this.activateSecondaryItem(this.secondaryNavigation.items[0].id)
      }
    },
    activateSecondaryItem (id) {
      this.activeItem.secondaryNavigation.items.forEach(item => {
        item.id === id ? item.active = true : item.active = false
      });
    },
  },
  mounted() {
    this.activatePrimaryItem('home')
  }
}
</script>

External Links

Use the target property with the to property to add a menu item that will open in a link in the desired target.

<template>
  <div style="display: flex; flex-direction: row;">
    <ci-primary-navigation>
      <ci-primary-navigation-item
        v-for="item in primaryNavigation.filter(item => item.slot === 'top')"
        :key="item.id"
        :icon="item.icon"
        :to="item.to"
        :target="item.target"
        :active="item.active"
        :tooltip-text="item.tooltipText"
      />
    </ci-primary-navigation>
    <ci-secondary-navigation
      :title="secondaryNavigation.title"
      :items="secondaryNavigation.items"
    />
  </div>
</template>

<script>
export default {
  data() {
    const ref = this;
    return {
      activeItem: '',
      primaryNavigation: [
        {
          id: 'home',
          slot: 'top',
          icon: 'home',
          tooltipText: 'Home',
          active: false,
          secondaryNavigation: {
            title: 'Home',
            items: [
              { id: 'dashboard', text: 'Dashboard', onClick: function() { ref.activateSecondaryItem('dashboard') }, active: false },
              { id: 'analytics', text: 'Analytics', onClick: function() { ref.activateSecondaryItem('analytics') }, active: false },
              { id: 'settings', text: 'Settings', onClick: function() { ref.activateSecondaryItem('settings') }, active: false },
            ],
          },
        },
        {
          id: 'external',
          slot: 'top',
          icon: 'settings',
          target: '_blank',
          to: 'http://www.google.com',
          tooltipText: 'External Link',
          active: false
        },
        {
          id: 'calendar',
          slot: 'top',
          icon: 'calendar',
          to: 'http://www.yahoo.com',
          tooltipText: 'Calendar',
          active: false
        }
      ],
      secondaryNavigation: {
        title: '',
        items: []
      },
    }
  },
  methods: {
    activatePrimaryItem(itemId) {
      if (this.activeItem.id !== itemId) {
        if (this.activeItem) this.activeItem.active = false
        const newActiveItem = this.primaryNavigation.find(item => item.id === itemId)
        this.activeItem = newActiveItem;
        newActiveItem.active = true;

        this.secondaryNavigation = newActiveItem.secondaryNavigation
        this.activateSecondaryItem(this.secondaryNavigation.items[0].id)
      }
    },
    activateSecondaryItem (id) {
      this.activeItem.secondaryNavigation.items.forEach(item => {
        item.id === id ? item.active = true : item.active = false
      });
    },
  },
  mounted() {
    this.activatePrimaryItem('home')
  }
}
</script>

Bottoms Slot

Use the bottom slot to place content at the bottom of the Primary Navigation.

<template>
  <div style="display: flex; flex-direction: row;">
    <ci-primary-navigation>
      <ci-primary-navigation-item
        v-for="item in primaryNavigation.filter(item => item.slot === 'top')"
        :key="item.id"
        :icon="item.icon"
        :target="item.target"
        :active="item.active"
        :tooltip-text="item.tooltipText"
        @click="activatePrimaryItem(item.id)"
      />

      <template #bottom>
        <ci-primary-navigation-item
          v-for="item in primaryNavigation.filter(item => item.slot === 'bottom')"
          :key="item.id"
          :icon="item.icon"
          :target="item.target"
          :active="item.active"
          :tooltip-text="item.tooltipText"
          @click="activatePrimaryItem(item.id)"
        />
      </template>
    </ci-primary-navigation>
    <ci-secondary-navigation
      :title="secondaryNavigation.title"
      :items="secondaryNavigation.items"
    />
  </div>
</template>

<script>
export default {
  data() {
    const ref = this;
    return {
      activeItem: '',
      primaryNavigation: [
        {
          id: 'home',
          slot: 'top',
          icon: 'home',
          tooltipText: 'Home',
          active: false,
          secondaryNavigation: {
            title: 'Home',
            items: [
              { id: 'dashboard', text: 'Dashboard', onClick: function() { ref.activateSecondaryItem('dashboard') }, active: false },
              { id: 'analytics', text: 'Analytics', onClick: function() { ref.activateSecondaryItem('analytics') }, active: false },
              { id: 'settings', text: 'Settings', onClick: function() { ref.activateSecondaryItem('settings') }, active: false },
            ],
          },
        },
        {
          id: 'calendar',
          slot: 'top',
          icon: 'calendar',
          tooltipText: 'Calendar',
          active: false,
          secondaryNavigation: {
            title: 'Calendar',
            items: [
              { id: 'prep', text: 'Meeting Prep', onClick: function() { ref.activateSecondaryItem('prep') }, active: false },
              { id: 'settings', text: 'Settings', onClick: function() { ref.activateSecondaryItem('settings') }, active: false },
            ],
          },
        },
        {
          id: 'settings',
          slot: 'bottom',
          icon: 'settings',
          tooltipText: 'Settings',
          active: false,
          secondaryNavigation: {
            title: 'Settings',
            items: [
              { id: 'general', text: 'General', onClick: function() { ref.activateSecondaryItem('general') }, active: false },
              { id: 'advanced', text: 'Advanced', onClick: function() { ref.activateSecondaryItem('advanced') }, active: false },
            ],
          },
        },
      ],
      secondaryNavigation: {
        title: '',
        items: []
      },
    }
  },
  methods: {
    activatePrimaryItem(itemId) {
      if (this.activeItem.id !== itemId) {
        if (this.activeItem) this.activeItem.active = false
        const newActiveItem = this.primaryNavigation.find(item => item.id === itemId)
        this.activeItem = newActiveItem;
        newActiveItem.active = true;

        this.secondaryNavigation = newActiveItem.secondaryNavigation
        this.activateSecondaryItem(this.secondaryNavigation.items[0].id)
      }
    },
    activateSecondaryItem (id) {
      this.activeItem.secondaryNavigation.items.forEach(item => {
        item.id === id ? item.active = true : item.active = false
      });
    },
  },
  mounted() {
    this.activatePrimaryItem('home')
  }
}
</script>

Slots

Slot	Description
default	Used for all navigation custom content. Renders under top navigation icon
more	Used to render additional navigation custom content below a divider
bottom	Used to render custom content at the bottom of navigation

Interfaces

PrimaryNavigationItem Interface

Property	Type	Description	Required
tooltip-text	String	Text to display on item hover tooltip	false
icon	String	The icon for the menu item	true
to	Route|string	A route or webpage to navigate to when clicked.	false
focused	Boolean	Whether the item is focused or not.	false
active	Boolean	Whether the item is active or not.	false
subItems	SubMenuItem[]	All secondary navigation item list. Used when user wants to display secondary navigation.	false

SubMenuItem Interface

Each SubMenuItem can have the following properties. You cannot combine to and onClick and must choose only one for each item.

Property	Type	Description	Required
id	String	The unique id for the menu item	false
text	String	The text for the menu item	true
icon	String	The icon for the menu item	false
to	Route|string	A route to navigate to when clicked. Cannot be combined with onCLick	false
onClick	Function	The function to execute when clicked. Cannot be combined with to	false
active	Boolean	Whether the item is active or not. If your app uses vue-router, this will be handled automatically	true