ion-toolbar

shadow

Toolbars are generally positioned above or below content and provide content and actions for the current screen. When placed within the content, toolbars will scroll with the content.

Toolbars can contain several different components including titles, buttons, icons, back buttons, menu buttons, searchbars, segments, progress bars, and more.

Basic Usage

It is recommended to put a toolbar inside of a header or footer for proper positioning. When a toolbar is placed in a header it will appear fixed at the top of the content. When it is placed in a footer it will appear fixed at the bottom. Fullscreen content will scroll behind a toolbar in a header or footer. A title component can be used to display text inside of the toolbar.

<ion-header>
  <ion-toolbar>
    <ion-title>Header Toolbar</ion-title>
  </ion-toolbar>
</ion-header>

<ion-footer>
  <ion-toolbar>
    <ion-title>Footer Toolbar</ion-title>
  </ion-toolbar>
</ion-footer>

Buttons in Toolbars

Buttons placed in a toolbar should be placed inside of the buttons component. The buttons component can be positioned inside of the toolbar using a named slot. The "primary" and "secondary" slots behave differently in ios and md mode.

The buttons component can wrap a standard button, back button, menu button, or several of any of them. A button in a toolbar is styled to be clear by default, but this can be changed using the fill property on the button. The properties included on back button and menu button in this example are for display purposes; see their respective documentation for proper usage.

<ion-toolbar>
  <ion-buttons slot="start">
    <ion-button>
      Start
    </ion-button>
  </ion-buttons>
  <ion-title>Start / End Buttons</ion-title>
  <ion-buttons slot="end">
    <ion-button>
      End
    </ion-button>
  </ion-buttons>
</ion-toolbar>

<ion-toolbar>
  <ion-buttons slot="secondary">
    <ion-button>
      Secondary
    </ion-button>
  </ion-buttons>
  <ion-buttons slot="primary">
    <ion-button>
      Primary
    </ion-button>
  </ion-buttons>
  <ion-title>Primary / Secondary Buttons</ion-title>
</ion-toolbar>

<ion-toolbar>
  <ion-buttons slot="secondary">
    <ion-button>
      <ion-icon slot="icon-only" name="person-circle"></ion-icon>
    </ion-button>
    <ion-button>
      <ion-icon slot="icon-only" name="search"></ion-icon>
    </ion-button>
  </ion-buttons>
  <ion-buttons slot="primary">
    <ion-button>
      <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
    </ion-button>
  </ion-buttons>
  <ion-title>Icon Buttons</ion-title>
</ion-toolbar>

<ion-toolbar>
  <ion-buttons slot="secondary">
    <ion-button fill="solid">
      <ion-icon slot="start" name="person-circle"></ion-icon>
      Contact
    </ion-button>
  </ion-buttons>
  <ion-buttons slot="primary">
    <ion-button fill="solid">
      Help
      <ion-icon slot="end" name="help-circle"></ion-icon>
    </ion-button>
  </ion-buttons>
  <ion-title>Solid Buttons</ion-title>
</ion-toolbar>

<ion-toolbar>
  <ion-buttons slot="secondary">
    <ion-button fill="outline">
      <ion-icon slot="start" name="star"></ion-icon>
      Star
    </ion-button>
  </ion-buttons>
  <ion-buttons slot="primary">
    <ion-button fill="outline">
      Edit
      <ion-icon slot="end" name="create"></ion-icon>
    </ion-button>
  </ion-buttons>
  <ion-title>Outline Buttons</ion-title>
</ion-toolbar>

<ion-toolbar>
  <ion-buttons slot="start">
    <ion-back-button default-href="#"></ion-back-button>
  </ion-buttons>
  <ion-title>Back Button</ion-title>
</ion-toolbar>

<ion-toolbar>
  <ion-buttons slot="start">
    <ion-menu-button auto-hide="false"></ion-menu-button>
  </ion-buttons>
  <ion-title>Menu Button</ion-title>
</ion-toolbar>

Searchbars in Toolbars

A searchbar can be placed inside of a toolbar to search through the content. It should be the only child component of the toolbar, and will take up the full width and height.

<ion-header>
  <ion-toolbar>
    <ion-title>Toolbar</ion-title>
  </ion-toolbar>
  <ion-toolbar>
    <ion-searchbar></ion-searchbar>
  </ion-toolbar>
</ion-header>

Segments in Toolbars

Segments are generally used in toolbars to toggle between two different content views on the same page. They can be placed in a toolbar with other components, such as buttons, but should not be placed alongside a title.

<ion-header>
  <ion-toolbar>
    <ion-segment value="all">
      <ion-segment-button value="all">
        <ion-label>All</ion-label>
      </ion-segment-button>
      <ion-segment-button value="favorites">
        <ion-label>Favorites</ion-label>
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>
</ion-header>

Progress Bars in Toolbars

A progress bar is used as a loading indicator to show an ongoing process in an app. Progress bars can be placed with any other components inside of a toolbar as they will align with the bottom of the toolbar.

<ion-header>
  <ion-toolbar>
    <ion-title>Toolbar</ion-title>
    <ion-progress-bar type="indeterminate"></ion-progress-bar>
  </ion-toolbar>
</ion-header>

Theming

Colors

<ion-toolbar>
  <ion-title>Default Toolbar</ion-title>
</ion-toolbar>
<ion-toolbar color="primary">
  <ion-title>Primary Toolbar</ion-title>
</ion-toolbar>
<ion-toolbar color="secondary">
  <ion-title>Secondary Toolbar</ion-title>
</ion-toolbar>
<ion-toolbar color="tertiary">
  <ion-title>Tertiary Toolbar</ion-title>
</ion-toolbar>
<ion-toolbar color="success">
  <ion-title>Success Toolbar</ion-title>
</ion-toolbar>
<ion-toolbar color="warning">
  <ion-title>Warning Toolbar</ion-title>
</ion-toolbar>
<ion-toolbar color="danger">
  <ion-title>Danger Toolbar</ion-title>
</ion-toolbar>
<ion-toolbar color="light">
  <ion-title>Light Toolbar</ion-title>
</ion-toolbar>
<ion-toolbar color="medium">
  <ion-title>Medium Toolbar</ion-title>
</ion-toolbar>
<ion-toolbar color="dark">
  <ion-title>Dark Toolbar</ion-title>
</ion-toolbar>

CSS Custom Properties

src/app/example.component.html

<ion-toolbar>
  <ion-title>Custom Toolbar</ion-title>
</ion-toolbar>

src/app/example.component.css

ion-toolbar {
  --background: #19422d;
  --color: white;

  --border-color: #f24aec;
  --border-width: 4px 0;
  --border-style: double;

  --min-height: 80px;
  --padding-top: 20px;
  --padding-bottom: 20px;
}

Borders

In md mode, the <ion-header> will receive a box-shadow on the bottom, and the <ion-footer> will receive a box-shadow on the top. In ios mode, the <ion-header> will receive a border on the bottom, and the <ion-footer> will receive a border on the top.

Properties

color

Description	The color to use from your application's color palette. Default options are: "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", and "dark". For more information on colors, see theming.
Attribute	color
Type	"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string & Record<never, never> ｜ undefined
Default	undefined

mode

Description	modeは、どのプラットフォームのスタイルを使用するかを決定します。
Attribute	mode
Type	"ios" ｜ "md"
Default	undefined

Events

No events available for this component.

Methods

No public methods available for this component.

CSS Shadow Parts

No CSS shadow parts available for this component.

CSS Custom Properties

Name	Description
--background	ツールバーの背景
--border-color	ツールバーの枠の色
--border-style	ツールバーのボーダーのスタイル
--border-width	ツールバーの枠の幅
--color	ツールバーテキストの色
--min-height	ツールバーの最小高さ
--opacity	ツールバーの背景の不透明度
--padding-bottom	ツールバーのBottom Padding
--padding-end	ツールバーの向きが左から右の場合はRight Padding、右から左の場合はLeft Paddingを使用します。
--padding-start	ツールバーの方向が左から右の場合はLeft Padding、右から左の場合はRight Paddingを使用します。
--padding-top	ツールバーのTop Padding

Slots

Name	Description
``	slotがない状態で提供される場合、コンテンツは名前付きslotの間に配置されます。
end	コンテンツは、LTRではツールバーテキストの右側に、RTLでは左側に配置されます。
primary	コンテンツは、ios modeではツールバーテキストの右側に、md modeでは右端に配置されます。
secondary	コンテンツは、ios modeではツールバーテキストの左側に、md modeでは右側に直接配置されます。
start	コンテンツは、LTRではツールバーテキストの左側に、RTLでは右側に配置されます。