Create versatile bottombars quickly and painlessly.

Bottombar is a mirror library of Topbar with the obvious difference of creating the bar at the bottom of the page. So both libraries have the same functions, and the functions take in the same arguments. Therefore, if you understood how to use Topbar, then you know all about bottombar already.

Under the hood, Bottombar uses Row to quickly place items onto your app's bottombar (we suggest you read about how Row works), which means you can easily align columns in your Bottombar using flexible_spaces. In addition to the base functions found in Row (bottombar:column, and bottombar:flexible_space, which behave exactly like row:column and row:flexible_space), there are additional functions to help you create your app's bottombar faster, which we cover later on in this guide.

The most significant difference between Row and Bottombar is that Bottombar does not have a render function. Bottombar renders the columns by itself and automatically places them in the bottombar (as soon as at least one column is visible).

Add Custom Content

Bottombar requires you to place your items in columns by calling bottombar:column (or call any of its predefined functions such as bottombar:filled_button that automatically add their return values inside a bottombar:column) and aligning the columns using flexible_space (similar to a Row). However, unlike Row, Bottombar automatically calls its render function as soon as any visible content is added to it, which means that all you have to do to create a bottombar in your app is to call, bottombar:column().

bottombar:column("My Bottombar")

The above function will create the Bottombar and place the text "My Bottombar inside the bar.

Add Logo

The bottombar:logo lets you quickly add an image or text as your logo.

// OR
bottombar:logo(text_logo: "My App")

If you have set your app's logo in the logo library and call bottombar:logo without any arguments, the bottombar:logo will use the image logo you set in the logo

// bottombar:logo will add your logo set in the logo:primary to the bottombar
Add Links and Buttons

You can use the following functions; to add links and buttons. They all work like the button function they call, with the added option of hiding the button at different breakpoints.

Add Text

To add any simple text, such as page titles, that appropriately aligns itself within the bottombar you just need to call the bottombar:text function. Similar to all the button function of bottombar, you also have the option of setting the text's visibility at different break points.

bottombar:text("Inbox", display_on_desktop: FALSE)

The above example adds the text "Inbox" to the Bottombar that is hidden on desktop.

Clear Previous Bottombar Items

Sometimes in your code, you may want to clear all the previously added items to the Bottombar before it is rendered to add a new set of items or simply remove the bottombar altogether. To do this simply call the bottombar:clear.


bottombar:text("New Page")

In the above example, bottombar functions called before the bottombar clear will be disregarded. This means that the logo and the text "Pricing" will never be rendered in the Bottombar, while "New Page" will be added.

Set the Gap Between Items

You can set the horizontal gap between the items added the Bottombar. This is different than the gap created by flexible_space, as the gap generated by flexible_space automatically increases and decreases down to zero.

// setting a 1em horizontal gap between bottombar items
Change the Bottombar's Look

You can change the bottombar's background color, border color, and top/bottom padding.

bottombar:padding(top: "1em", bottom: "2em")

The above example will render a top with pure blue background color and border color, a 1em padding at the top, and a 2em padding at the bottom of the Bottombar.

Change Bottombar's Container Width

You can update the content container of the bottombar using bottombar:width.

bottombar:width(width: "1280px", max_width: "95%")

The above example places all the bottombar items inside a 1280px wide container with an allowed maximum width of 95% of the parent container width.

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