Toolbar component that can be used with navigation. Left, center and right container can be specified by class names.

Usage #

    <div class="left"><ons-back-button>Back</ons-back-button></div>
    <div class="center">Title</div>
    <div class="right">Label</div>

Live Example #

See the Pen Alert, confirm and prompt dialogs by Onsen & Monaca (@onsen) on CodePen.

See also #

Attributes #

Name Type
Default Value
var String Variable name to refer this toolbar. Optional
inline Display the toolbar as an inline element. Optional
modifier The appearance of the toolbar. Optional
fixed-style By default the center element will be left-aligned on Android and center-aligned on iOS. Use this attribute to override this behavior so it's always displayed in the center. Optional

Preset Modifiers #

Modifier Description
transparent Transparent toolbar
android Android style toolbar. Title is left-aligned.

Discussion #