View Source Improve this doc

ons-toolbar

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

Usage # 

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

Live Example #

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

Open in New Window

See also #

Attributes #

Name Type
Default Value		 Description
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 #