Language: ENCN

Sub Navbar React Component

Sub Navbar is useful when you need to put any additional elements into Navbar, like Tab Links or Search Bar. It also remains visible when Navbar hidden.

Sub Navbar React component represents Sub Navbar component.

Usage examples

<Subnavbar>
  <ButtonsSegmented>
    <Button tabLink="#tab1" active>Tab 1</Button>
    <Button tabLink="#tab2">Tab 2</Button>
  </ButtonsSegmented>
</Subnavbar>

Renders to:

<div class="subnavbar">
  <div class="buttons-row">
    <a href="#" class="button tab-link active" data-tab="#tab1">Tab 1</a>
    <a href="#" class="button tab-link" data-tab="#tab2">Tab 2</a>
  </div>
</div>

Inside of Navbar

<Navbar backLink="Back" title="Tabs" sliding>
  <Subnavbar sliding>
    <ButtonsSegmented>
      <Button tabLink="#tab1" active>Tab 1</Button>
      <Button tabLink="#tab2">Tab 2</Button>
    </ButtonsSegmented>
  </Subnavbar>
</Navbar>

Renders to:

<div class="navbar">
  <div class="navbar-inner">
    <div class="left sliding">
      <a href="#" class="link back">
        <i class="icon icon-back"></i>
        <span>Back</span>
      </a>
    </div>
    <div class="center sliding">Tabs</div>
    <div class="subnavbar sliding">
      <div class="buttons-row">
        <a href="#" class="button tab-link active" data-tab="#tab1">Tab 1</a>
        <a href="#" class="button tab-link" data-tab="#tab2">Tab 2</a>
      </div>
    </div>
  </div>
</div>

Properties

Prop Type Description
sliding boolean Enables "sliding" effect