The sidebar allows you to create Sidebar navigation quickly and easily.

Sidebar works similar to Tob/Bottombar as it auto renders, which means you need to add items to Sidebar to add the Sidebar on your page.

Add a Logo

To add a logo to the top of the Sidebar, call sidebar:logo that lets you use an image or text as your logo. You can also turn your Sidebar logo into a link by using the href argument. And finaly, you can also set a bottom border for the logo to separate it from the rest of the Sidebar.

sidebar:logo(text_logo: "My Logo", href: "/", bottom_border_color: "#f5f5f5")
// Adds a text logo, reading "My Logo" that is linked to the index with light colored bottom border
Add Links

You can add links to the Sidebar using sidebar:link. In addition to a link URL, all Sidebar links accept a link name, icon name, and a notification message that will show in a badge at the right-hand side of the link.

sidebar:link(name: "Inbox", link: "/inbox", icon_name: "mail", notification: "4")

The above example will add a link to the sidebar with a mail icon, "Inbox" for its title, shows the number 4 in a notification badge on the right-hand side, and takes the user to the inbox page once clicked on.

Group Links

You can group any of your links into collapsable tabs that showcase a group name. To do this, all you have to do is to set the group name to which a sidebar:link belongs to when adding each link. And then, using the sidebar:group function, you can change if the group should be collapsed by default or not.

sidebar:link(name: "Inbox", link: "/inbox", group: "Mail")
sidebar:link(name: "Sent", link: "/sent", group: "Mail")
sidebar:group(name: "Mail", collapsed: FALSE)

The above example will generate a sidebar with 2 links that are grouped under the "Mail" dropdown, which is open by default.

Add Custom Content

sidebar:header allows you to add any HTML between the logo and the links without any limitations.

sidebar:header(button:filled("Try for Free"))

The above code adds the "Try for Free" button underneath the sidebar:logo (If added, otherwise at the top of the Sidebar) and above sidebar:links and sidebar:groups.

Show Sidebar By Default

By default, once a Sidebar is added, it is hidden and off the screen, awaiting a toggler to command it to open. However, you can set your sidebar to be open by default when the page loads using sidebar:show_by_default.

Add Toggle to Topbar

By default, a toggle (a button with the menu icon AKA hamburger) is added to the left side of the Topbar that opens and closes the sidebar. However, you can change the behaviour of this toggle using sidebar:add_toggle_to_topbar.

sidebar:add_toggle_to_topbar(add_toggle: TRUE, display_on_desktop: FALSE, display_on_laptop: FALSE)

The above code will add the toggle to the Topbar but hides it on screens that match the breakpoints of laptops and desktops.

Add Toggle to Bottombar

Similar to adding toggle to Topbar, with the exception that this toggle is not added automatically to the bottombar.

Turn Any Item to Toggle Sidebar

By adding the class "_sidebar__toggler" to an element, the element will start to open/close the Sidebar on click.

PRINT button:filled("Open Sidebar", attributes: ["class" => "_sidebar__toggler"])

The above example will print a button that, on click, will toggle open the sidebar.

Change Sidebar's Colors

You can change the background and the border color of the Sidebar using sidebar:background_color and sidebar:border_color.


The above code will change the sidebar's background and border color to a light grey.

Copyright ©2013-2022 SunSed®. All rights reserved.