Nav

The nav is a grouped set of links that take the user to another page, or tab through parts of a page. It comes in horizontal or vertical with several different variants.

Summary

Uses Icons

Javascript Enhanced

See this kit in action in our sample UI

Vertical Default

@State private var selectedVDefault: Int = 1

PBNav(
        selected: $selectedVDefault,
        variant: .normal,
        orientation: .vertical,
        title: "Menu"
      ) {
        PBNavItem("Photos")
        PBNavItem("Music")
        PBNavItem("Video")
        PBNavItem("Files")
      }

Vertical Subtle

@State private var selectedVSubtle: Int = 1

PBNav(
        selected: $selectedVSubtle,
        variant: .subtle,
        orientation: .vertical,
        borders: false
      ) {
        PBNavItem("Photos")
        PBNavItem("Music")
        PBNavItem("Video")
        PBNavItem("Files")
      }

Vertical Subtle No Highlight

@State private var selectedVSubtleNoHighlight: Int = 1

PBNav(
        selected: $selectedVSubtleNoHighlight,
        variant: .subtle,
        orientation: .vertical,
        borders: false,
        highlight: false
      ) {
        PBNavItem("Photos")
        PBNavItem("Music")
        PBNavItem("Video")
        PBNavItem("Files")
      }

Vertical Bold

 @State private var selectedVBold: Int = 1

PBNav(
        selected: $selectedVBold,
        variant: .bold,
        orientation: .vertical,
        borders: false
      ) {
        PBNavItem("Photos")
        PBNavItem("Music")
        PBNavItem("Video")
        PBNavItem("Files")
      }

Horizontal Default

 @State private var selectedHDefault: Int = 1

 PBNav(
          selected: $selectedHDefault,
          variant: .normal,
          orientation: .horizontal
        ) {
          PBNavItem("Photos")
          PBNavItem("Music")
          PBNavItem("Video")
          PBNavItem("Files")
        }

Horizontal Subtle

@State private var selectedHSubtle: Int = 1

PBNav(
        selected: $selectedHSubtle,
        variant: .subtle,
        orientation: .horizontal,
        borders: false
      ) {
        PBNavItem("Photos")
        PBNavItem("Music")
        PBNavItem("Video")
        PBNavItem("Files")
      }

Horizontal Subtle No Highlight

@State private var selectedHSubtleNoHighlight: Int = 1

 PBNav(
        selected: $selectedHSubtleNoHighlight,
        variant: .subtle,
        orientation: .horizontal,
        borders: false,
        highlight: false
      ) {
        PBNavItem("Photos")
        PBNavItem("Music")
        PBNavItem("Video")
        PBNavItem("Files")
      }

Horizontal Bold

@State private var selectedHBold: Int = 1

PBNav(
        selected: $selectedHBold,
        variant: .bold,
        orientation: .horizontal,
        borders: false
      ) {
        PBNavItem("Photos")
        PBNavItem("Music")
        PBNavItem("Video")
        PBNavItem("Files")
      }

Props

Name	Type	Description	Default	Values
selected	`Int`	Sets selected to current index	`0`
currentHover	`Int?`	Sets the current hover state to the current index
variant	`Variant`	Sets variant for nav	`.normal`	`normal` `subtle` `bold`
orientation	`Orientation`	Changes the orientation of nav	`.vertical`	`horizontal` `verticle`
title	`String?`	Sets title of nav
borders	`Bool`	Boolean value for whether nav items have a border or not	`true`	`true` `false`
highlight	`Bool`	Boolean value for adding a highlight to nav	`true`	`true` `false`
views	`[AnyView]`	An Array of AnyView

UI Samples using Nav Kit

Get the full picture. See how this kit is used in our samples.

Analytics Dashboard

News Magazine

Trending Repositories

Crowdsourced Posts

Contribute to Playbook

When you start designing a new feature, you may come across a Design Token or Component that isn’t defined in Playbook. If so, you should open an issue or reach out to the team to make a contribution.

Contribute on GitHub

As the highest-rated residential remodeler in the nation, our international technology team builds a custom suite of products that continuously transform our business.

Power

Tech @ Power

Open Positions

About Power

Connect

Dribbble

Github

Connect Chat