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

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

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

Github

Connect Chat