Toolbar component that is positioned at the bottom of the page. Since bottom toolbars are very versatile elements, ons-bottom-toolbar does not provide any specific layout syntax for its children. Modifiers or custom CSS must be used.



See also

Attributes are added directly to the element. You can do this in HTML or JS.

HTML: <ons-bottom-toolbar someAttribute="true" anotherAttribute><ons-bottom-toolbar>
JS: document.querySelector('ons-bottom-toolbar').setAttribute('someAttribute', 'true')

Name Type Description
modifier String The appearance of the toolbar. Optional.

Modifiers are set in the modifier attribute. To use more than one, separate them by spaces. For example:
<ons-bottom-toolbar modifier="transparent aligned"><ons-bottom-toolbar>.

Name Description
transparent Make the toolbar transparent.
aligned Vertically aligns its children and applies flexbox for block elements. justify-content CSS rule can be used to change horizontal align.

Need Help?

If you have any questions, use our Community Forum or talk to us on Discord chat. The Onsen UI team and your peers in the community will work together to help solve your issues.

For bug reports and feature requests use our GitHub Issues page.