Full

Standard sidebar that collapses to icon-only rail on toggle.

_sidebar.html.erb

███
  ███████ ██████████ █ ████ █████ █████████

  ██████
    ███ ██████ ██████████████████████████ ██████ █ █████ ████████ █████ ███ ██ █████████ █
      █
        ██████ ███████
        ██████ █
          █ ██████ ████████████ █████ ██████ █████ ████ ███████ ████ ██
          █ ██████ ████████████ █████ ███████ █████ █████████████ ██████ █████ ██

Get Access to View Code

sidebar_controller.js

██████ █ ██████████ █ ████ ████████████████████

██████ ███████ █████ ███████ ██████████ █
  ██████ ███████ █ █████████ ███████████ ████████ ████████ ████████ ██████████ █████████████ ███████████
  ██████ ██████ █ █
    ██████████ █ █████ ████████ ████████ █████ ██
    █████ █ █████ ████████ ████████ █████ ██
    ██████ █ █████ ███████ ████████ ██████ ██
    ████████ █ █████ ████████ ████████ █████ █
  █

Get Access to View Code

sidebar_full_component.html.erb

████ █████████████████████████
     ███████████████████████████████
     █████████████████████████████████ █████████ ███
     ███████████████████████████████████

  ████ ███████████████████████████ ██████████ █████████████ ████

    ███ █████ ████ ██
    ████ ██████████ ██████████████████ ████
      ██ █████████ ██████████ ███

Get Access to View Code

sidebar_full_component.rb

█ ██████████████████████ ████

█████ ████████████████████ █ ███████████████████
  ████████████ ██████████ ██████████████████

  █████ █ █
    █████ █████ ██████████ ████ ███████████ ██████████ █ ██ ███ ███████████████████████████ ██████████████████████ ███████████████████████ ████████████████ █████ ████████ █████ █ ███ ███████ █ █ ███ ███████████ ███████████ █ █ ████ ███████ ███ █ █ ██████████ █ █ █████████ █ █ ███ █████ █ █ ███ ████ ██████████████
    ██████ █████ ██████████ ████ ███████████ ██████████ █ ██ ███ ███████████████████████████ ██████████████████████ ███████████████████████ ████████████████ ██████ ███████ █ █ ███ ████████ █████████ █ █ ████ ██████ ████████ █ █ █████████████ ███ █ █ ████ █ █ █ █ ███ █████████████
    █████████ █████ ██████████ ████ ███████████ ██████████ █ ██ ███ ███████████████████████████ ██████████████████████ ███████████████████████ ████████████████ ██████████ ████████████████ ███████████ ████ ███████ █████ █ ███████ ███████████████ ████████ ████ ██████████ █████ █ ███████ ███████████████ █████ █████ █ ██████████ █████ █ ████████ █████████ ██████████ █████████ ██████████ █████ █ ████████ ███████████ ███████████ ██████████ ███████ █████ █ ██████████████████████████████████████████████████ █████ █ ██████████████████████████████████████ ████████████ █████ █ █████████████████████████████████ █████████████████ ████████ ████████████████████ ██████████████████████ ███████████████████████ ████████████████ ██████ ████ █ █ ████ █ █ █ █ ███ █████████████
    ██████ █████ ██████████ ████ ███████████ ██████████ █ ██ ███ ███████████████████████████ ██████████████████████ ███████████████████████ ████████████████ █████ ███████ █ █ ██████████ █ █ ████ █████ █ █ ███ █████ █ █ ████████ █████ █ █ █████████ █ █ ███ ███████ ███ █ █ ███ █████ █ █ ███████ █████ █ █ █████████ █ █ ███ ██████ █ █ ████ ██████ █ █ ██████████████████

Get Access to View Code

sidebar_controller.js

██████ █ ██████████ █ ████ ████████████████████

██████ ███████ █████ ███████ ██████████ █
  ██████ ███████ █ █████████ ███████████ ████████ ████████ ████████ ██████████ █████████████ ███████████
  ██████ ██████ █ █
    ██████████ █ █████ ████████ ████████ █████ ██
    █████ █ █████ ████████ ████████ █████ ██
    ██████ █ █████ ███████ ████████ ██████ ██
    ████████ █ █████ ████████ ████████ █████ █
  █

Get Access to View Code

Options

Name	Type	Default	Description
`sections` *	Array	required	Array of hashes with :label (String), :items (Array of :label, :icon, :href, :badge, :active, :children)
`collapsed`	Boolean	`false`	Start in collapsed (icon-only) state
`brand`	Hash		Brand/logo area: { name: String, logo_url: String, href: String }

Name	Type	Default	Description
`collapsed`	Boolean	`false`	Start collapsed
`brand_name`	String		Brand name text
`brand_href`	String	`"#"`	Brand link URL

Slots

Name	Description
`sections`	Section slots with :label parameter, containing item slots

Floating

Overlay sidebar that slides in from left with backdrop dimming.

_sidebar.html.erb

███
  ███████ ██████████ █ ████████ █████ █████████

  ██████
    ███ ███████ ██████ ██████ ████████ ██ ████ ███████ ██
    ███████ █████████████████████████████████ ████████████████████████████████████████
      ████ ████
    █████████

    ███ ████████ ███████ ██

Get Access to View Code

sidebar_controller.js

██████ █ ██████████ █ ████ ████████████████████

██████ ███████ █████ ███████ ██████████ █
  ██████ ███████ █ █████████ ███████████ ████████ ████████ ████████ ██████████ █████████████ ███████████
  ██████ ██████ █ █
    ██████████ █ █████ ████████ ████████ █████ ██
    █████ █ █████ ████████ ████████ █████ ██
    ██████ █ █████ ███████ ████████ ██████ ██
    ████████ █ █████ ████████ ████████ █████ █
  █

Get Access to View Code

sidebar_floating_component.html.erb

████ █████████████████████████
     ███████████████████████████████████
     ███████████████████████████████
     ███████████████████████████████████████████████████████████

  ███ ████████ ██
  ████ ██████████████████████████████
       ██████████████████████████████████
       ████████████ ███████ ████ ███████████ ██████████████████ ████████████ █████████ █████████████████████
  ██████

Get Access to View Code

sidebar_floating_component.rb

█ ██████████████████████ ████

█████ ████████████████████████ █ ███████████████████
  ████████████ ██████████ ██████████████████

  █████ █ █
    █████ █████ ██████████ ████ ███████████ ██████████ █ ██ ███ ███████████████████████████ ██████████████████████ ███████████████████████ ████████████████ █████ ████████ █████ █ ███ ███████ █ █ ███ ███████████ ███████████ █ █ ████ ███████ ███ █ █ ██████████ █ █ █████████ █ █ ███ █████ █ █ ███ ████ ██████████████
    ██████ █████ ██████████ ████ ███████████ ██████████ █ ██ ███ ███████████████████████████ ██████████████████████ ███████████████████████ ████████████████ ██████ ███████ █ █ ███ ████████ █████████ █ █ ████ ██████ ████████ █ █ █████████████ ███ █ █ ████ █ █ █ █ ███ █████████████
    █████████ █████ ██████████ ████ ███████████ ██████████ █ ██ ███ ███████████████████████████ ██████████████████████ ███████████████████████ ████████████████ ██████████ ████████████████ ███████████ ████ ███████ █████ █ ███████ ███████████████ ████████ ████ ██████████ █████ █ ███████ ███████████████ █████ █████ █ ██████████ █████ █ ████████ █████████ ██████████ █████████ ██████████ █████ █ ████████ ███████████ ███████████ ██████████ ███████ █████ █ ██████████████████████████████████████████████████ █████ █ ██████████████████████████████████████ ████████████ █████ █ █████████████████████████████████ █████████████████ ████████ ████████████████████ ██████████████████████ ███████████████████████ ████████████████ ██████ ████ █ █ ████ █ █ █ █ ███ █████████████
    ██████ █████ ██████████ ████ ███████████ ██████████ █ ██ ███ ███████████████████████████ ██████████████████████ ███████████████████████ ████████████████ █████ ███████ █ █ ██████████ █ █ ████ █████ █ █ ███ █████ █ █ ████████ █████ █ █ █████████ █ █ ███ ███████ ███ █ █ ███ █████ █ █ ███████ █████ █ █ █████████ █ █ ███ ██████ █ █ ████ ██████ █ █ ██████████████████

Get Access to View Code

sidebar_controller.js

██████ █ ██████████ █ ████ ████████████████████

██████ ███████ █████ ███████ ██████████ █
  ██████ ███████ █ █████████ ███████████ ████████ ████████ ████████ ██████████ █████████████ ███████████
  ██████ ██████ █ █
    ██████████ █ █████ ████████ ████████ █████ ██
    █████ █ █████ ████████ ████████ █████ ██
    ██████ █ █████ ███████ ████████ ██████ ██
    ████████ █ █████ ████████ ████████ █████ █
  █

Get Access to View Code

Options

Name	Type	Default	Description
`sections` *	Array	required	Same as full style sections
`brand`	Hash		Brand area config

Name	Type	Default	Description
`brand_name`	String		Brand name text
`brand_href`	String	`"#"`	Brand link URL

Slots

Name	Description
`sections`	Section slots with items

Changelog v1.0.0

- v1.0.0: Initial release with full and floating styles

Sidebar

Full

Options

Slots

Floating

Options

Slots

Changelog v1.0.0

Get Full Access