Design

Provides the ability to select one of multiple navigation paths with each path being represented by an icon. It may be used within another control, such as a drawer, to provide access to all ‘top level’ panels within that drawer without the need to continually open and close it.

Navigation rails should only be used on desktop and tablet devices (not smaller format devices).

Example

<template>
  <FeatherNavigationRail>
    <div class="user" slot="header">
      <FeatherIcon :icon="account" class="user-icon" />
      <div>
        <p class="sub">Signed in as</p>
        <p class="user-name">Rik</p>
      </div>
    </div>
    <FeatherRailItem slot="main" href="#" :icon="app" title="App One" />
    <FeatherRailItem slot="main" href="#" :icon="app" title="App Two" />
    <FeatherRailItem slot="main" href="#" :icon="app" title="App Three" />
    <FeatherRailGroup label="Help Navigation">
      <FeatherRailItem href="#" :icon="app" title="Feedback" />
      <FeatherRailItem href="#" :icon="app" title="Sign out" />
    </FeatherRailGroup>
  </FeatherNavigationRail>
</template>
<script>
  import {
    FeatherNavigationRail,
    FeatherRailItem,
    FeatherRailGroup,
  } from "@featherds/navigation-rail";

  import App from "@featherds/icon/medical/Hospital";
  import Account from "@featherds/icon/action/AccountCircle";
  import { FeatherIcon } from "@featherds/icon";
  export default {
    computed: {
      app() {
        return App;
      },
      account() {
        return Account;
      },
    },
    components: {
      FeatherNavigationRail,
      FeatherRailItem,
      FeatherRailGroup,
      FeatherIcon,
    },
  };
</script>

Getting Started

The NavigationRail has 2 states; expanded and collapsed. When expanded all menu items are visible and can be interacted with. When it is collapsed only the main group is visible. When using NavigationRail please only populate the main and default slot with RailGroup and RailItem components.

The header content should not exceed 2.5rem in height.

When collapsed the NavigationRail will take up 3.25rem in width, when expanded it will not move any content on the page due to its fixed position. Therefore you don't need to worry about page content shifting.

Props

NameDescriptionTypeRequiredDefault
modelValuewhen true menu will be full widthBooleanfalse-
labelsObject containing labels to be used by this component. Mainly used for i18n or customization of labels. See Labels exampleObjectfalseSee Labels example

Labels

Text labels for Navigation Rail can be customized via the labels property. The default labels values are:

{
  main: "Main Navigation",
  expand: "Show full menu"
}

Events

  • update:modelValue - trigger when a change occurs to modelValue

Slots

  • default - this is where any menu groups that are not considered part of the main group should go. This content will be hidden when collapsed.
  • main - this is where you should put RailItems that are part of the main navigation group. These items will have there icon maintain visibility whilst the menu is collapsed
  • header - this is where extra content should go that appears to the left of the expand/collapse button. This content will be hidden when collapsed

data-ref-ids

  • feather-navigation-rail-expand - button that triggers expand/collapse
  • feather-navigation-rail-main - nav that contains the main navigation

RailGroup

Props

NameDescriptionTypeRequiredDefault
labellabel for the underlying menu groupstringtrue-

Slots

  • default - RailItems should be placed here

RailItem

This item should be used in the main slot of NavigationRail or as a child of RailGroup.

Props

NameDescriptionTypeRequiredDefault
iconicon to be renderedObjectfalse-
hrefhref to be used by itemStringtrue-
titletitle of the itemStringtrue-

Slots

  • default - can be used to set the content of the item to something other than title