Sidebar

The sidebar component is a fixed, vertical panel that typica11y displays navigation and/or page hierarchy.

Sage Component

SageSidebar

<%= sage_component SageSidebar, { id: "sample-sidebar" } do %>
  <%= sage_component SageNav, {
    aria_label: "Example Navigation",
    items: [
      { link: "#", text: "Home", icon: 'home'},
      { link: "#", text: "Website", icon: 'monitor', items: [
        {
          text: "Design",
          link: "#",
          active: true,
        },
        {
          text: "Pages",
          link: "#",
        },
        {
          text: "Navigation",
          link: "#",
        },
        {
          text: "Blog",
          link: "#",
        }
      ] },
      { link: "#", text: "Products", icon: 'product' },
      { link: "#", text: "Sales", icon: 'tag' },
      { link: "#", text: "Marketing", icon: 'megaphone' },
      { link: "#", text: "People", icon: 'user-circle' },
      { link: "#", text: "Analytics", icon: 'chart' },
    ]
  } %>
<% end %>

Property	Description	Type	Default
`id` required	Unique identifier to use with associated button	String	`nil`
`size`	Additional sizing variations available for sidebar	`md` or `lg`	`nil`

Remember to set the ID which also sets the data-js-sidebar value

Don't

The sidebar is not intended to be used multiple times on a page