Navigation

Navigation component examples

import {Frame, Navigation} from '@shopify/polaris';
import {HomeIcon, OrderIcon, ProductIcon} from '@shopify/polaris-icons';
import React from 'react';

function NavigationExample() {
  return (
    <Frame>
      <Navigation location="/">
        <Navigation.Section
          items={[
            {
              url: '#',
              label: 'Home',
              icon: HomeIcon,
            },
            {
              url: '#',
              excludePaths: ['#'],
              label: 'Orders',
              icon: OrderIcon,
              badge: '15',
            },
            {
              url: '#',
              excludePaths: ['#'],
              label: 'Products',
              icon: ProductIcon,
            },
          ]}
        />
      </Navigation>
    </Frame>
  );
}

Required components

The navigation component must be passed to the frame component. The mobile version of the navigation component appears in the top bar component.

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 a section or an item.
• Group navigation items into sections based on related categories.
• Use a section title to clarify the category of a section.
• Use a major icon for item actions.
• Use a minor icon for secondary actions.
• Use the provided navigation section component to group navigation items.
• Not add additional components, like badge, in navigation items. Example: Don‘t add the New badge.

Content guidelines

Navigation should:

• Use sentence case for primary and secondary navigation items

• Use as few words as possible to describe each item label

• Use all caps for section labels

Navigation section

A navigation section groups together related navigation items. Navigation sections can be clarified by a heading. Merchants can use a section to easily find navigation items within a specific category.

Section properties

Navigation section item

The content of the navigation component consists of navigation items. Each item is a link or action a merchant can take.

Item properties

SubNavigationItem

Properties

SecondaryAction

Properties

Navigation section rollup

Rollup allows items in a navigation section to roll up and be revealed when they are of use to the merchant.

Rollup properties

Navigation section action

Action allows a complementary icon-only action to render next to the section title.

Action properties

Related components

• To provide the structure for the navigation component, including the left sidebar and the top bar use the frame component.
• To display the navigation component on small screens, to provide search and a user menu, or to theme the frame component to reflect an application’s brand, use the top bar component.
• To tell merchants their options once they have made changes to a form on the page use the contextual save bar component.
• To provide quick, at-a-glance feedback on the outcome of an action, use the toast component.
• To indicate to merchants that a page is loading or an upload is processing use the loading component.
• To alternate among related views within the same context, use the tabs component.
• To embed a single action or link within a larger span of text, use the link component.