Create versatile topbars quickly and painlessly.

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

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

Add Custom Content

Topbar requires you to place your items in columns by calling topbar:column (or call any of its predefined functions such as topbar:filled_button that automatically add their return values inside a topbar:column) and aligning the columns using flexible_space (similar to a Row). However, unlike Row, Topbar 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 topbar in your app is to call, topbar:column().

topbar:column("My Topbar")

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

Add Logo

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

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

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

// topbar:logo will add your logo set in the logo:primary to the topbar
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 topbar you just need to call the topbar:text function. Similar to all the button function of topbar, you also have the option of setting the text's visibility at different break points.

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

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

Clear Previous Topbar Items

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


topbar:text("New Page")

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

Set the Gap Between Items

You can set the horizontal gap between the items added the Topbar. 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 topbar items
Change the Topbar's Look

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

topbar: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 Topbar.

Change Topbar's Container Width

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

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

The above example places all the topbar 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.