🔥 Meet Our New Project: t0ggles - Your Ultimate Project Management Tool!

Subnavbar Svelte Component

Subnavbar 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.

Subnavbar Svelte component represents Subnavbar component.

There are following components included:

PropTypeDefaultDescription
<Subnavbar> properties
slidingbooleanEnables "sliding" effect
titlestringSubnvabar title
innerbooleantrueWhen enabled the additional "subnavbar-inner" wrapper element will be added

Examples

subnavbar.svelte
<script>
  import {
    Navbar,
    Page,
    Subnavbar,
    Segmented,
    Button,
    Block,
    List,
    ListItem,
  } from 'framework7-svelte';
</script>

<Page>
  <Navbar title="Subnavbar">
    <Subnavbar>
      <Segmented strong>
        <Button smallMd active>Link 1</Button>
        <Button smallMd>Link 2</Button>
        <Button smallMd>Link 3</Button>
      </Segmented>
    </Subnavbar>
  </Navbar>
  <Block>
    <p>
      Subnavbar 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.
    </p>
  </Block>
  <List strong outlineIos>
    <ListItem link="/subnavbar-title/" title="Subnavbar Title" />
  </List>
</Page>
subnavbar-title.svelte
<script>
  import { Navbar, Page, Block, Subnavbar } from 'framework7-svelte';
</script>

<Page>
  <Navbar>
    <Subnavbar title="Page Title" />
  </Navbar>
  <Block>
    <p>It also possible to use Subnavbar to display page title and keep navbar only for actions.</p>
  </Block>
  <Block>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, consequatur quia amet
      voluptate vero quasi, veniam, quisquam dolorum magni sint enim, harum expedita excepturi quas
      iure magnam minus voluptatem quaerat!
    </p>
    <p>
      Dolore laboriosam error magnam velit expedita recusandae, dolor asperiores unde, sint,
      veritatis illum ipsum? Nulla ratione nobis, ullam debitis. Inventore sapiente rem dolore eum
      ipsa totam perspiciatis cupiditate, amet maiores!
    </p>
    <p>
      Ratione quod minus ipsum maxime cum voluptate molestiae adipisci placeat ut illo, alias nobis
      perferendis magni odio sunt, porro, totam praesentium possimus! Autem inventore ut provident
      animi quae, impedit id!
    </p>
    <p>
      Aperiam ea ab harum. Quis dolorem cupiditate, incidunt mollitia ducimus voluptatem commodi!
      Odio quasi amet hic nesciunt, quibusdam, est vero repellat sapiente perferendis, optio
      laboriosam in culpa veniam alias ad.
    </p>
    <p>
      A fuga corporis harum velit maiores, quaerat accusantium cum aspernatur consequuntur dolor vel
      fugit omnis est dolorum delectus debitis aperiam distinctio eveniet vero nihil voluptatum
      culpa. Accusamus aliquid facere tenetur?
    </p>
  </Block>
</Page>