Navigation

Bread Crumbs

Default

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

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.

<%= 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

Dribbble

Github

Connect Chat