Navbar

Main container for navigation bar group. Hamburger menu will be used to show slot items in mobile.

import '@wevisdemo/ui/styles/navbar.css';
import WvNavbar from '@wevisdemo/ui/{react,vue,svelte}/navbar';

<WvNavbar />

Props

Name	Type	Default
homeHref	string	'/'
title	string	''
dark	boolean	false
animated	boolean	false
alwayShowSlot	boolean	false
logoAddonSrc	string	''
logoAddonAlt	string	''
logoAddonWidth	string | number	0
logoAddonHeight	string | number	24
logoAddonPlus	boolean	false

Slot / Children

Elements in the right column on desktop / hamburger menu dropdown on mobile

Examples

With title and slot

<WvNavbar title="SOME PROJECT">
  <WvNavButton active>About</WvNavButton>
  <WvNavButton>Report</WvNavButton>
</WvNavbar>

With dark theme

<WvNavbar dark title="SOME PROJECT">
  <WvNavButton dark active>
    About
  </WvNavButton>
  <WvNavButton dark>Report</WvNavButton>
</WvNavbar>

With animated logo

<WvNavbar animated />

With logo addon

<WvNavbar logoAddonSrc="https://raw.githubusercontent.com/microsoft/fluentui-emoji/main/assets/Sparkles/3D/sparkles_3d.png" />

With plus before logo addon

<WvNavbar
  logoAddonPlus
  logoAddonSrc="https://raw.githubusercontent.com/microsoft/fluentui-emoji/main/assets/Sparkles/3D/sparkles_3d.png"
/>

Alway show slot

Disable hamburger menu on mobile

<WvNavbar alwayShowSlot>
  <WvNavButton active>About</WvNavButton>
  <WvNavButton>Report</WvNavButton>
</WvNavbar>