Shipfaster: UI Components


A sidebar wraps website navigation under one panel.


Breadcrumbs are used when you have a large amount of content organised in hierarchical structure with defined categories (multiple sections that can be divided into more sub-sections). An excellent example is e-commerce site, in which a large variety of products is grouped into logical categories. They inform visitors of their current location in relation to the entire site hierarchy. Whereas they also improve the find-ability of site pages. The structure of the site is more easily understood because it is laid out in a breadcrumb.

When your application needs to display the global navigation on the left, it is recommended to use vertical navigation. Although vertical navigation menus generally take up more space than horizontal menus, they have become more popular as desktop monitors move to a widescreen format.

When to use

  • When you have a broad range of links for navigation and you need an efficient way to show them all.
  • When you have room for the navigation to grow in the future.


Anatomy of sidebar navigation
  1. Label with icon: Indicates the link name in short. Optionally accompanied by an icon to distinguish in a broad list of links.
  2. Notification badge: Optionally show a notification number badge if needed. It creates a nudge for the user to open the link.
  3. Open (or) close chevron: Used when you want to show multiple sub-links inside this navigation block.

Best Practices

  1. Place vertical navigation on the left and use a noticeable design.
  2. Adding the relevant icons to the links, we speed up the visually scanning of the navigation and its legibility.
  3. If your app comprises several tasks and subpages, it is worth grouping them to improve the significance of the hierarchy of some functions and their readability.
  4. If you have a shortened navigation, it is worth adding a tooltip after hovering the cursor over the link so that the user knows what the subpage is responsible for. And also badges can be placed with links for any notifications.
  5. In long menus, place less-important ones at the bottom.

Recommended resources

Get instant access to over 6,000 Figma Components with Shipfaster UI. A Figma UI Kit & Design system used by over 2,000 designers.

All Products

Outline: Figma’s Ultimate Wireframe Kit

Stay on top of testing ideas and prototypes with a wireframe kit that simplifies your process

Pricing Icon
800+ of Downloads
Review Stars
800+ downloads
Learn More
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.