Navigation

Bread Crumbs

Default

<div>
  <%= pb_rails("bread_crumbs", props: { aria: { label: "Breadcrumb Navigation" } }) do%>
    <%= pb_rails("icon", props: { icon: "home", color: "link"}) %>
    <%= pb_rails("bread_crumbs/bread_crumb_item", props: { link: "/" }) do %> 
      <%= pb_rails("title", props: { size: 4, text: "Home", tag: "span", color: "link" }) %>
     <%end%>
     <%= pb_rails("icon", props: { icon: 'users', color: "link"}) %>
    <%= pb_rails("bread_crumbs/bread_crumb_item", props: { link: "/users" }) do %> 
      <%= pb_rails("title", props: { size: 4, text: "Users", tag: "span", color: "link" }) %>
     <%end%>
     <%= pb_rails("icon", props: { icon: "user"}) %>
    <%= pb_rails("bread_crumbs/bread_crumb_item") do %> 
      <%= pb_rails("title", props: { size: 4, text: "User", tag: "span" }) %>
     <%end%>
    <%end%>
</div>

All Nav variants' navItems accept our global Spacing (padding, margin) props for custom spacing requirements. This example uses paddingY="xxs" and margin="none" on the bold variant to show this in action!

<%= pb_rails("nav", props: { variant: "bold" }) do %>
    <%= pb_rails("nav/item", props: { text: "About", link: "#", padding_y:"xxs", margin:"none" }) %>
    <%= pb_rails("nav/item", props: { text: "Case Studies", link: "#", active: true, padding_y:"xxs", margin:"none"  }) %>
    <%= pb_rails("nav/item", props: { text: "Service", link: "#", padding_y:"xxs", margin:"none" }) %>
    <%= pb_rails("nav/item", props: { text: "Contacts", link: "#", padding_y:"xxs", margin:"none" }) %>
  <% end %>

Nav With Font Control

All Nav variants' navItems accept the following props for customizing font:

fontSize / font_size defaults to normal, also accepts small
fontWeight / font_weight defaults to regular, also accepts bold and bolder

<%= pb_rails("nav", props: { variant: "bold" }) do %>
    <%= pb_rails("nav/item", props: { text: "About", link: "#", font_weight:"bolder", font_size:"small" }) %>
    <%= pb_rails("nav/item", props: { text: "Case Studies", link: "#", active: true, font_weight:"bolder", font_size:"small"  }) %>
    <%= pb_rails("nav/item", props: { text: "Service", link: "#", font_weight:"bolder", font_size:"small" }) %>
    <%= pb_rails("nav/item", props: { text: "Contacts", link: "#", font_weight:"bolder", font_size:"small" }) %>
  <% end %>

Collapsible Nav

The collapsible prop allows users to create a nested, collapsible nav. Pass collapsible to any NavItem and pass that navItem any number of NavItems as children to create a collapsible nav.

The optional collapsed prop can also be used to set the default state for the collapsed nav on first render of the page. collapsed takes a boolean value that is set to true (meaning nav is collapsed) by default. Set it to false as shown here to have the nav open on first render.

<%= pb_rails("nav", props: { variant: "bold" }) do %>
    <%= pb_rails("nav/item", props: { text: "Overview", link: "#", collapsible: true, icon_left:"city", collapsed: false }) do %>
        <%= pb_rails("nav", props: { variant: "bold" }) do %>
            <%= pb_rails("nav/item", props: { text: "City", link: "#" }) %>
            <%= pb_rails("nav/item", props: { text: "People", link: "#" }) %>
            <%= pb_rails("nav/item", props: { text: "Business", link: "#" }) %>
        <% end %>
    <% end %>
    <%= pb_rails("nav/item", props: { text: "Albums", link: "#", active: true, collapsible: true, icon_left: "theater-masks" }) do %>
        <%= pb_rails("nav", props: { variant: "bold" }) do %>
            <%= pb_rails("nav/item", props: { text: "Entertainment", link: "#" }) %>
            <%= pb_rails("nav/item", props: { text: "Food", link: "#" }) %>
            <%= pb_rails("nav/item", props: { text: "Style", link: "#" }) %>
        <% end %>
    <% end %>
    <%= pb_rails("nav/item", props: { text: "Similar Artists", link: "#", collapsible: true, icon_left: "city" }) do %>
        <%= pb_rails("nav", props: { variant: "bold" }) do %>
            <%= pb_rails("nav/item", props: { text: "City", link: "#" }) %>
            <%= pb_rails("nav/item", props: { text: "People", link: "#" }) %>
            <%= pb_rails("nav/item", props: { text: "Business", link: "#" }) %>
        <% end %>
    <% end %>
  <% end %>

Collapsible Nav With Options

Collapsible Navs optionally accept the following props:

collapsibleTrail / collapsible_trail, enables a vertical guideline to the left of the collapsible nav's children
iconRight optionally accepts an array of 2 icon values; the first is used as the default icon when the node is collapsed, the second is toggled when the node is expanded. If only 1 icon value is passed, the icon will not toggle between collapsible states.

<%= pb_rails("nav", props: { variant: "bold" }) do %>
    <%= pb_rails("nav/item", props: { text: "Overview", link: "#", collapsible: true, icon_left:"city", collapsible_trail: true, font_weight:"bolder", font_size:"small", icon_right:["plus", "minus"] }) do %>
        <%= pb_rails("nav", props: { variant: "bold" }) do %>
            <%= pb_rails("nav/item", props: { text: "City", link: "#", font_size:"small", margin_y:"none" }) %>
            <%= pb_rails("nav/item", props: { text: "People", link: "#", font_size:"small", margin_y:"none" }) %>
            <%= pb_rails("nav/item", props: { text: "Business", link: "#", font_size:"small", margin_y:"none" }) %>
        <% end %>
    <% end %>
    <%= pb_rails("nav/item", props: { text: "Albums", link: "#", active: true, collapsible: true, icon_left: "theater-masks", collapsible_trail: true, font_weight:"bolder", font_size:"small", icon_right:["plus", "minus"] }) do %>
        <%= pb_rails("nav", props: { variant: "bold" }) do %>
            <%= pb_rails("nav/item", props: { text: "Entertainment", link: "#", font_size:"small", margin_y:"none" }) %>
            <%= pb_rails("nav/item", props: { text: "Food", link: "#", font_size:"small", margin_y:"none" }) %>
            <%= pb_rails("nav/item", props: { text: "Style", link: "#", font_size:"small", margin_y:"none" }) %>
        <% end %>
    <% end %>
    <%= pb_rails("nav/item", props: { text: "Similar Artists", link: "#", collapsible: true, icon_left: "city", collapsible_trail: true, font_weight:"bolder", font_size:"small", icon_right:["plus", "minus"] }) do %>
        <%= pb_rails("nav", props: { variant: "bold" }) do %>
            <%= pb_rails("nav/item", props: { text: "City", link: "#", font_size:"small", margin_y:"none" }) %>
            <%= pb_rails("nav/item", props: { text: "People", link: "#", font_size:"small", margin_y:"none" }) %>
            <%= pb_rails("nav/item", props: { text: "Business", link: "#", font_size:"small", margin_y:"none" }) %>
        <% end %>
    <% end %>
  <% end %>

Collapsible Nav No Icon

Optionally remove the expand/collapse icon(s) from any collapsible nav item by passing "none" to the icon_right prop on that nav item.

<%= pb_rails("nav", props: { variant: "bold" }) do %>
    <%= pb_rails("nav/item", props: { text: "Overview", link: "#", collapsible: true, icon_left:"city", collapsed: false, icon_right: "none" }) do %>
        <%= pb_rails("nav", props: { variant: "bold" }) do %>
            <%= pb_rails("nav/item", props: { text: "City", link: "#" }) %>
            <%= pb_rails("nav/item", props: { text: "People", link: "#" }) %>
            <%= pb_rails("nav/item", props: { text: "Business", link: "#" }) %>
        <% end %>
    <% end %>
    <%= pb_rails("nav/item", props: { text: "Albums", link: "#", active: true, collapsible: true, icon_left: "theater-masks", icon_right: "none" }) do %>
        <%= pb_rails("nav", props: { variant: "bold" }) do %>
            <%= pb_rails("nav/item", props: { text: "Entertainment", link: "#" }) %>
            <%= pb_rails("nav/item", props: { text: "Food", link: "#" }) %>
            <%= pb_rails("nav/item", props: { text: "Style", link: "#" }) %>
        <% end %>
    <% end %>
    <%= pb_rails("nav/item", props: { text: "Similar Artists", link: "#", collapsible: true, icon_left: "city", icon_right: "none" }) do %>
        <%= pb_rails("nav", props: { variant: "bold" }) do %>
            <%= pb_rails("nav/item", props: { text: "City", link: "#" }) %>
            <%= pb_rails("nav/item", props: { text: "People", link: "#" }) %>
            <%= pb_rails("nav/item", props: { text: "Business", link: "#" }) %>
        <% end %>
    <% end %>
  <% end %>

Horizontal Nav

<%= pb_rails("nav", props: { orientation: "horizontal" }) do %>
  <%= pb_rails("nav/item", props: { text: "About", link: "#" }) %>
  <%= pb_rails("nav/item", props: { text: "Case Studies", link: "#", active: true }) %>
  <%= pb_rails("nav/item", props: { text: "Service ", link: "#" }) %>
  <%= pb_rails("nav/item", props: { text: "Contacts", link: "#" }) %>
<% end %>

Subtle Horizontal Nav

<%= pb_rails("nav", props: { orientation: "horizontal", variant: "subtle" }) do %>
  <%= pb_rails("nav/item", props: { text: "About", link: "#" }) %>
  <%= pb_rails("nav/item", props: { text: "Case Studies", link: "#", active: true }) %>
  <%= pb_rails("nav/item", props: { text: "Service ", link: "#" }) %>
  <%= pb_rails("nav/item", props: { text: "Contacts", link: "#" }) %>
<% end %>

Bold Horizontal Nav

<%= pb_rails("nav", props: { orientation: "horizontal", variant: "bold" }) do %>
  <%= pb_rails("nav/item", props: { text: "About", link: "#" }) %>
  <%= pb_rails("nav/item", props: { text: "Case Studies", link: "#", active: true }) %>
  <%= pb_rails("nav/item", props: { text: "Service ", link: "#" }) %>
  <%= pb_rails("nav/item", props: { text: "Contacts", link: "#" }) %>
<% end %>

Horizontal Nav With Extended Underline

The optional extendedUnderline/extended_underline prop can be used with the default normal variant of the horizontal orientation of the nav to extend the underline to take up the full width of the container.

<%= pb_rails("nav", props: { orientation: "horizontal", extended_underline: true }) do %>
  <%= pb_rails("nav/item", props: { text: "About", link: "#" }) %>
  <%= pb_rails("nav/item", props: { text: "Case Studies", link: "#", active: true }) %>
  <%= pb_rails("nav/item", props: { text: "Service ", link: "#" }) %>
  <%= pb_rails("nav/item", props: { text: "Contacts", link: "#" }) %>
<% end %>

Horizontal Nav With Disabled Item

Default Variant

Subtle Variant

Bold Variant

Use the disabled prop on a navItem/nav_item within a horizontal nav to set it as disabled. This will render the UI as disabled, prevent clicks and not allow for tabIndex to access the item.

<%= pb_rails("caption", props: { margin_bottom: "sm", text: "Default Variant" }) %>
<%= pb_rails("nav", props: { orientation: "horizontal" }) do %>
  <%= pb_rails("nav/item", props: { text: "About", link: "#" }) %>
  <%= pb_rails("nav/item", props: { text: "Case Studies", link: "#", active: true }) %>
  <%= pb_rails("nav/item", props: { text: "Service ", link: "#", disabled: true }) %>
  <%= pb_rails("nav/item", props: { text: "Contacts", link: "#" }) %>
<% end %>
<%= pb_rails("caption", props: { margin_bottom: "sm", margin_top:"lg", text: "Subtle Variant" }) %>
<%= pb_rails("nav", props: { orientation: "horizontal", variant: "subtle" }) do %>
  <%= pb_rails("nav/item", props: { text: "About", link: "#" }) %>
  <%= pb_rails("nav/item", props: { text: "Case Studies", link: "#", active: true }) %>
  <%= pb_rails("nav/item", props: { text: "Service ", link: "#", disabled: true }) %>
  <%= pb_rails("nav/item", props: { text: "Contacts", link: "#" }) %>
<% end %>
<%= pb_rails("caption", props: { margin_bottom: "sm", margin_top:"lg", text: "Bold Variant" }) %>
<%= pb_rails("nav", props: { orientation: "horizontal", variant: "bold" }) do %>
  <%= pb_rails("nav/item", props: { text: "About", link: "#" }) %>
  <%= pb_rails("nav/item", props: { text: "Case Studies", link: "#", active: true }) %>
  <%= pb_rails("nav/item", props: { text: "Service ", link: "#", disabled: true }) %>
  <%= pb_rails("nav/item", props: { text: "Contacts", link: "#" }) %>
<% end %>

Vertical Nav With Disabled Item

Default Variant

Subtle Variant

Bold Variant

Use the disabled prop on a navItem/nav_item within a vertical nav to set it as disabled. This will render the UI as disabled, prevent clicks and not allow for tabIndex to access the item.

<%= pb_rails("flex", props: { justify: "between" }) do %>
  <%= pb_rails("flex", props: { orientation:"column", wrap: true }) do %>
    <%= pb_rails("caption", props: { margin_bottom: "sm", text: "Default Variant" }) %>
    <%= pb_rails("nav") do %>
      <%= pb_rails("nav/item", props: { text: "About", link: "#" }) %>
      <%= pb_rails("nav/item", props: { text: "Case Studies", link: "#", active: true }) %>
      <%= pb_rails("nav/item", props: { text: "Service ", link: "#", disabled: true }) %>
      <%= pb_rails("nav/item", props: { text: "Contacts", link: "#" }) %>
    <% end %>
  <% end %>
    <%= pb_rails("flex", props: { orientation:"column", wrap: true }) do %>
    <%= pb_rails("caption", props: { margin_bottom: "sm", text: "Subtle Variant" }) %>
    <%= pb_rails("nav", props:{variant: "subtle"}) do %>
      <%= pb_rails("nav/item", props: { text: "About", link: "#" }) %>
      <%= pb_rails("nav/item", props: { text: "Case Studies", link: "#", active: true }) %>
      <%= pb_rails("nav/item", props: { text: "Service ", link: "#", disabled: true }) %>
      <%= pb_rails("nav/item", props: { text: "Contacts", link: "#" }) %>
    <% end %>
  <% end %>
    <%= pb_rails("flex", props: { orientation:"column", wrap: true }) do %>
    <%= pb_rails("caption", props: { margin_bottom: "sm", text: "Bold Variant" }) %>
    <%= pb_rails("nav", props:{variant: "bold"}) do %>
      <%= pb_rails("nav/item", props: { text: "About", link: "#" }) %>
      <%= pb_rails("nav/item", props: { text: "Case Studies", link: "#", active: true }) %>
      <%= pb_rails("nav/item", props: { text: "Service ", link: "#", disabled: true }) %>
      <%= pb_rails("nav/item", props: { text: "Contacts", link: "#" }) %>
    <% end %>
  <% end %>
  
<% end %>

Block

<%= pb_rails("nav", props: {title: "Users", link: "#"}) do %>
  <%= pb_rails("nav/item", props: { link: "#", active: true }) do%>
    <%= pb_rails("user", props: {
      name: "Anna Black",
      territory: "PHL",
      title: "Remodeling Consultant",
      orientation: "horizontal",
      align: "left",
      avatar_url: "https://randomuser.me/api/portraits/women/44.jpg"
    }) %>
  <% end %>
  <%= pb_rails("nav/item", props: { link: "#" }) do%>
    <%= pb_rails("user", props: {
      name: "Julie Hamilton",
      territory: "PHL",
      title: "Inside Sales Agent",
      orientation: "horizontal",
      align: "left",
      avatar_url: "https://randomuser.me/api/portraits/women/45.jpg"
      }) %>
    <% end %>
  <%= pb_rails("nav/item", props: { link: "#" }) do%>
    <%= pb_rails("user", props: {
      name: "Dennis Wilks",
      territory: "PHL",
      title: "Senior Remodeling Consultant",
      orientation: "horizontal",
      align: "left",
      avatar_url: "https://randomuser.me/api/portraits/men/44.jpg"
      }) %>
    <% end %>
  <%= pb_rails("nav/item", props: { link: "#" }) do%>
    <%= pb_rails("user", props: {
      name: "Ronnie Martin",
      territory: "PHL",
      title: "Customer Development Representative",
      orientation: "horizontal",
      align: "left",
      avatar_url: "https://randomuser.me/api/portraits/men/46.jpg"
      }) %>
    <% end %>
<% end %>

Without Title

<%= pb_rails("nav") do %>
  <%= pb_rails("nav/item", props: { icon_left: "newspaper", text: "News Feed"  }) %>
  <%= pb_rails("nav/item", props: { icon_left: "comments-alt", link: "#", text: "Messages", active: true }) %>
  <%= pb_rails("nav/item", props: { icon_left: "calendar-check", icon_right: "angle-down", link: "#", text: "Events" }) %>
  <%= pb_rails("nav/item", props: { icon_left: "users", link: "#", text: "Friends" }) %>
  <%= pb_rails("nav/item", props: { icon_left: "users-class", icon_right: "angle-down", link: "#", text: "Groups" }) %>
<% end %>

Open in a New Tab

<%= pb_rails("nav", props: {title: "Popular Websites", link: "#"}) do %>
  <%= pb_rails("nav/item", props: { text: "Google", link: "https://www.google.com/", target: "_blank" }) %>
  <%= pb_rails("nav/item", props: { text: "YouTube", link: "https://www.youtube.com/", target: "_blank" }) %>
  <%= pb_rails("nav/item", props: { text: "Facebook", link: "https://www.facebook.com/", target: "_blank" }) %>
  <%= pb_rails("nav/item", props: { text: "Amazon", link: "https://www.amazon.com/", target: "_blank" }) %>
<% end %>

Tab Nav

This is about!

This is case studies!

This is service!

This is contacts!

The Nav kit can also be used to create dynamic tabbing. To do so, use the boolean tabbing prop as shown here.

All divs you want to use as tabs MUST have an id attached to them. To link the tab to the nav, use the required data attribute pb_tab_target on each nav/item and pass it the id of the tab you want linked to that specific nav/item. See code example below to see this in action.

<%= pb_rails("nav", props: { orientation: "horizontal", tabbing: true, padding_bottom: "sm" }) do %>
  <%= pb_rails("nav/item", props: { text: "About", active: true, data: { pb_tab_target: "about" }, cursor: "pointer" }) %>
  <%= pb_rails("nav/item", props: { text: "Case Studies", data: { pb_tab_target: "case_studies" }, cursor: "pointer" }) %>
  <%= pb_rails("nav/item", props: { text: "Service", data: { pb_tab_target: "service" }, cursor: "pointer" }) %>
  <%= pb_rails("nav/item", props: { text: "Contacts", data: { pb_tab_target: "contacts" }, cursor: "pointer" }) %>
<% end %>

<div id="about">
  <%= pb_rails("body", props: { text: "This is about!" }) %>
</div>

<div id="case_studies">
  <%= pb_rails("body", props: { text: "This is case studies!" }) %>
</div>

<div id="service">
  <%= pb_rails("body", props: { text: "This is service!" }) %>
</div>

<div id="contacts">
  <%= pb_rails("body", props: { text: "This is contacts!" }) %>
</div>

<script>
  // The script in the code snippet below is for demonstrating the active state and NOT needed for the kit to function.
  // The active prop can be used to highlight this active state.
  const navItemClass = "pb_nav_list_kit_item"
  const navItemActiveClass = "pb_nav_list_kit_item_active"
  const dataNavItems = "[data-pb-tab-target]"

  const navItemTabs = document.querySelectorAll(dataNavItems)
  navItemTabs.forEach(navItemTab => {
    navItemTab.addEventListener("click", event => {
      const navItemTabs = document.querySelectorAll(dataNavItems)
      navItemTabs.forEach(navItemTab => {
        if (navItemTab === event.target.closest(dataNavItems)) {
          navItemTab.classList.add(navItemActiveClass)
          navItemTab.classList.remove(navItemClass)
        } else {
          if (navItemTab.classList.contains(navItemActiveClass)) {
            navItemTab.classList.remove(navItemActiveClass)
            navItemTab.classList.add(navItemClass)
          }
        }
      })
    })
  })
</script>

Pagination

Default

Disclaimer

Our Pagination kit depends on the will_paginate library. Please follow the basic will_paginate setup.

Once you have perfomed the paginated query in your controller file you can use our kit (see code example below) instead of <%= will_paginate @users %> in your view file.

You need to add: require "playbook/pagination_renderer" in your apps controller file.

Note: If the total page count is 0 or 1, the Pagination kit will not be displayed as there aren't multiple pages to navigate.

<%= pb_rails("pagination", props: { model: @users, view: self}) %>

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