Skip to content
navbar / 5.0.5

navbar 5.0.5

Install from the command line:
Learn more about npm packages
$ npm install @dusk-network/navbar@5.0.5
Install via package.json:
"@dusk-network/navbar": "5.0.5"

About this version

Dusk UI Kit - Organism - Navbar

Storybook Docs

Installation

npm i -D @dusk-network/navbar

Usage

<script>
  import Navbar from "@dusk-network/navbar";
  import DropDown from "@dusk-network/drop-down";
  import Logo from "@dusk-network/logo";
  import Icon from "@dusk-network/icon";
  import Menu, { Item } from "@dusk-network/menu";
</script>

<Navbar appName="sb-demo" id="sb-example-nav">
  <svelte:fragment slot="logo">
    <Logo />
  </svelte:fragment>
  <svelte:fragment slot="networks">
    <Menu orientation="horizontal" name="Network Navigation">
      <Item>
        <DropDown options="{['Testnet', 'Mainnet']}" />
      </Item>
    </Menu>
  </svelte:fragment>
  <svelte:fragment slot="apps">
    <Menu orientation="horizontal" name="Portal Navigation">
      <Item href="javascript:;" active="{true}">Explorer</Item>
      <Item href="javascript:;">Wallet</Item>
      <Item href="javascript:;">Staking</Item>
    </Menu>
  </svelte:fragment>
  <svelte:fragment slot="links">
    <Menu orientation="horizontal" name="Developer Links">
      <Item href="https://shop.dusk.network">
        <Icon name="tshirt-crew-outline" /><span>Shop</span>
      </Item>
    </Menu>
  </svelte:fragment>
  <svelte:fragment slot="navigation">
    <Menu orientation="horizontal" name="App Navigation">
      <Item href="javascript:;">Chain Info</Item>
      <Item href="javascript:;" active>Blocks</Item>
      <Item href="javascript:;">Transactions</Item>
    </Menu>
  </svelte:fragment>
</Navbar>

Details


Assets

  • navbar-5.0.5-npm.tgz

Download activity

  • Total downloads 134
  • Last 30 days 0
  • Last week 0
  • Today 0