Skip to main content

ion-toolbar

View Source

Toolbars are positioned above or below content. When a toolbar is placed in an <ion-header> it will appear fixed at the top of the content, and when it is in an <ion-footer> it will appear fixed at the bottom. Fullscreen content will scroll behind a toolbar in a header or footer. When placed within an <ion-content>, toolbars will scroll with the content.

Buttons#

Buttons placed in a toolbar should be placed inside of the <ion-buttons> element. The <ion-buttons> element can be positioned inside of the toolbar using a named slot. The below chart has a description of each slot.

SlotDescription
secondaryPositions element to the left of the content in ios mode, and directly to the right in md mode.
primaryPositions element to the right of the content in ios mode, and to the far right in md mode.
startPositions to the left of the content in LTR, and to the right in RTL.
endPositions to the right of the content in LTR, and to the left in RTL.

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.

Usage#

<ion-toolbar>
<ion-title>Title Only</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button></ion-back-button>
</ion-buttons>
<ion-title>Back Button</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-title size="small">Small Title above a Default Title</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-title>Default Title</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 color="secondary">
<ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Default 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-title>Solid Buttons</ion-title>
<ion-buttons slot="primary">
<ion-button fill="solid" color="secondary">
Help
<ion-icon slot="end" name="help-circle"></ion-icon>
</ion-button>
</ion-buttons>
</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-title>Outline Buttons</ion-title>
<ion-buttons slot="primary">
<ion-button color="danger" fill="outline">
Edit
<ion-icon slot="end" name="create"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="secondary">
<ion-button>
Account
</ion-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button color="danger">
Edit
</ion-button>
</ion-buttons>
<ion-title>Text Only Buttons</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="start">
<ion-menu-button autoHide="false"></ion-menu-button>
</ion-buttons>
<ion-buttons slot="secondary">
<ion-button>
<ion-icon slot="icon-only" name="star"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Left side menu toggle</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="primary">
<ion-button (click)="clickedStar()">
<ion-icon slot="icon-only" name="star"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Right side menu toggle</ion-title>
<ion-buttons slot="end">
<ion-menu-button autoHide="false"></ion-menu-button>
</ion-buttons>
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="primary">
<ion-button (click)="clickedSearch()">
<ion-icon slot="icon-only" name="search"></ion-icon>
</ion-button>
</ion-buttons>
<ion-searchbar placeholder="Search Favorites"></ion-searchbar>
</ion-toolbar>
<ion-toolbar>
<ion-segment value="all">
<ion-segment-button value="all">
All
</ion-segment-button>
<ion-segment-button value="favorites">
Favorites
</ion-segment-button>
</ion-segment>
</ion-toolbar>
<ion-toolbar color="secondary">
<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 color="primary">
<ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Secondary Toolbar</ion-title>
</ion-toolbar>
<ion-toolbar color="dark">
<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 color="danger">
<ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Dark Toolbar</ion-title>
</ion-toolbar>

Properties#

color#

DescriptionThe 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.
Attributecolor
Typestring \| undefined
Defaultundefined

mode#

DescriptionThe mode determines which platform styles to use.
Attributemode
Type"ios" \| "md"
Defaultundefined

CSS Custom Properties#

NameDescription
--backgroundBackground of the toolbar
--border-colorColor of the toolbar border
--border-styleStyle of the toolbar border
--border-widthWidth of the toolbar border
--colorColor of the toolbar text
--min-heightMinimum height of the toolbar
--opacityOpacity of the toolbar background
--padding-bottomBottom padding of the toolbar
--padding-endRight padding if direction is left-to-right, and left padding if direction is right-to-left of the toolbar
--padding-startLeft padding if direction is left-to-right, and right padding if direction is right-to-left of the toolbar
--padding-topTop padding of the toolbar

Slots#

NameDescription
``Content is placed between the named slots if provided without a slot.
endContent is placed to the right of the toolbar text in LTR, and to the left in RTL.
primaryContent is placed to the right of the toolbar text in ios mode, and to the far right in md mode.
secondaryContent is placed to the left of the toolbar text in ios mode, and directly to the right in md mode.
startContent is placed to the left of the toolbar text in LTR, and to the right in RTL.