Navigation

Updated on 03 August 2017

Docs are work in progress, check open issues and see how you can help!

Navigation component can be placed in any self contained layer of information, ex.: app screen, modal, splash screen. Navigation can include title and left/right actions (none of the elements are mandatory to use). Can also be used in transparent mode.

Actions should only use default size, content width buttons. You can choose any variation of theme and style, but keep in mind consistency. Default button use: flat style and amplified theme. Buttons can also include text and/or icon.

Pseudo-code:

<navigation>
  <navigation-action position="left">
    <button text="Go back" width="content" style="flat" theme="amplified" />  
  </navigation-action>
  
  <navigation-title>
    <text type="title">Checkout</text>      
  </navigation-title>
  
  <navigation-action position="right">
    <button text="Confirm" width="content" style="flat" theme="amplified" />
  </navigation-action>  
</navigation>  
Go back
Checkout
Confirm

Themes

Navigation component accepts the same themes as, for example, Cell component. Likewise, navigation content should adapt based on the chosen theme. However, the product encourages the usage of default (none) and transparent themes.

Go back
Checkout
Confirm
Go back
Checkout
Confirm

Specifications

$navigation-content-spacing:              unit(1);

// Themes

$navigation-default-background:           palette(cg9);
$navigation-primary-background:           palette(cp1);
$navigation-amplified-background:         palette(cg1);
$navigation-muted-background:             palette(cg4);
$navigation-success-background:           palette(cs1);
$navigation-warning-background:           palette(cs3);
$navigation-transparent-background:       transparent;