Navbar
ion-navbar
ion-navbarNavbar acts as the navigational toolbar, which also comes with a back
button. A navbar can contain a ion-title, any number of buttons,
a segment, or a searchbar. Navbars must be placed within an
<ion-header> in order for them to be placed above the content.
It's important to note that navbar's are part of the dynamic navigation
stack. If you need a static toolbar, use ion-toolbar.
Usage
<ion-header>
<ion-navbar>
<button ion-button icon-only menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>
Page Title
</ion-title>
<ion-buttons end>
<button ion-button icon-only (click)="openModal()">
<ion-icon name="options"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
Instance Members
backButtonClick()
setBackButtonText()
Set the text of the Back Button in the Nav Bar. Defaults to “Back”.
Input Properties
| Attr | Type | Details |
|---|---|---|
| hideBackButton | boolean |
If true, the back button will be hidden. |
Sass Variables
| Property | Default | Description |
|---|---|---|
$toolbar-order-ios |
(
back-button: 0,
menu-toggle-start: 1,
buttons-left: 2,
buttons-start: 3,
content: 4,
buttons-end: 5,
buttons-right: 6,
menu-toggle-end: 7,
) |
Order of the toolbar elements |
$toolbar-ios-button-font-size |
1.7rem |
Font size of the toolbar button |
$toolbar-ios-title-font-size |
1.7rem |
Font size of the toolbar title |
$toolbar-ios-title-font-weight |
600 |
Font weight of the toolbar title |
$toolbar-ios-title-text-align |
center |
Text alignment of the toolbar title |
$toolbar-ios-title-text-color |
color-contrast($colors-ios, $toolbar-ios-background) |
Text color of the toolbar title |
$toolbar-ios-button-color |
color-contrast($colors-ios, $toolbar-ios-background, ios) |
Text color of the toolbar button |
$toolbar-ios-button-border-radius |
4px |
Border radius of the toolbar button |
$toolbar-ios-button-strong-font-weight |
600 |
Font weight of the strong toolbar button |
$navbar-ios-height |
$toolbar-ios-height |
Height of the navigation bar |
| Property | Default | Description |
|---|---|---|
$toolbar-order-md |
(
back-button: 0,
menu-toggle-start: 1,
buttons-left: 2,
content: 3,
buttons-start: 4,
buttons-end: 5,
buttons-right: 6,
menu-toggle-end: 7,
) |
Order of the toolbar elements |
$toolbar-md-title-font-size |
2rem |
Font size of the toolbar title |
$toolbar-md-title-text-color |
color-contrast($colors-md, $toolbar-md-background, md) |
Text color of the toolbar title |
$toolbar-md-button-font-size |
1.4rem |
Font size of the toolbar button |
$toolbar-md-button-color |
$toolbar-md-title-text-color |
Text color of the toolbar button |
$toolbar-md-button-border-radius |
2px |
Border radius of the toolbar button |
$toolbar-md-button-strong-font-weight |
bold |
Font weight of the strong toolbar button |
$navbar-md-height |
$toolbar-md-height |
Height of the navigation bar |
| Property | Default | Description |
|---|---|---|
$toolbar-order-wp |
(
back-button: 0,
menu-toggle-start: 1,
buttons-left: 2,
content: 3,
buttons-start: 4,
buttons-end: 5,
buttons-right: 6,
menu-toggle-end: 7,
) |
Order of the toolbar elements |
$toolbar-wp-title-padding-top |
0 |
Padding top of the toolbar title |
$toolbar-wp-title-padding-end |
6px |
Padding end of the toolbar title |
$toolbar-wp-title-padding-bottom |
$toolbar-wp-title-padding-top |
Padding bottom of the toolbar title |
$toolbar-wp-title-padding-start |
$toolbar-wp-title-padding-end |
Padding start of the toolbar title |
$toolbar-wp-title-font-size |
1.5rem |
Font size of the toolbar title |
$toolbar-wp-title-font-weight |
bold |
Font weight of the toolbar title |
$toolbar-wp-title-text-transform |
uppercase |
Text transform of the toolbar title |
$toolbar-wp-title-text-color |
color-contrast($colors-wp, $toolbar-wp-background, wp) |
Text color of the toolbar title |
$toolbar-wp-button-font-size |
1.4rem |
Font size of the toolbar button |
$toolbar-wp-button-color |
color-contrast($colors-wp, $toolbar-wp-background, wp) |
Text color of the toolbar button |
$toolbar-wp-button-border-radius |
2px |
Border radius of the toolbar button |
$toolbar-wp-button-strong-font-weight |
bold |
Font weight of the strong toolbar button |
$navbar-wp-height |
$toolbar-wp-height |
Height of the navigation bar |