Returnless UI

Navigation ​

The navigation component is used to display the primary navigation in the sidebar of the interface of an application. Navigation includes a list of links that users use to move between sections of the application.

Usage ​

js
<script lang="ts" setup>
import { Navigation, NavigationItem, NavigationSection } from '@returnless/focus-ui';
import { UserIcon, HandThumbDownIcon, QuestionMarkCircleIcon, BoltIcon } from '@heroicons/vue/16/solid';
</script>

<template>
  <Navigation>
    <NavigationSection>
      <NavigationItem>General</NavigationItem>
    </NavigationSection>
    <NavigationSection label="Workflow management">
      <NavigationItem>
        <template #icon>
          <HandThumbDownIcon />
        </template>
        Return reasons
      </NavigationItem>
      <NavigationItem active>
        <template #icon>
          <QuestionMarkCircleIcon />
        </template>
        Return questions
      </NavigationItem>
      <NavigationItem>
        <template #icon>
          <BoltIcon />
        </template>
        Automations
      </NavigationItem>
    </NavigationSection>
  </Navigation>
</template>

Best practices ​

The navigation component should:

  • Contain primary navigation items that perform an action when clicked. Each action should navigate to a URL or trigger another action like a modal overlay.
  • Only use secondary actions for supplementary actions to the primary actions.
  • Provide a non-primary link or action as a secondary action to the section or an item.
  • Group navigation items into sections based on related categories.
  • Use a section title to clarify the category of a section.