nav

➤ wl-nav

Provide access to destinations in your app.

➤ Properties

Property	Attribute	Type	Default	Description
fixed	fixed	boolean	false	Fixes the nav to the top of the page.
role	role	AriaRole	"navigation"	Role of the nav.
shadow	shadow	boolean	false	Gives the nav a shadow.

➤ Slots

Name	Description
left	Content positioned to the left.
right	Content positioned to the right.
title	Title.

➤ CSS Custom Properties

Property	Description
--nav-bg	Background
--nav-color	Color
--nav-elevation	Box shadow
--nav-height	Height
--nav-padding	Padding
--nav-title-font-size	Font size of the title slot
--nav-title-font-weight	Font weight of the title slot
--nav-title-margin	Margin of the title slot
--nav-transition	Transition

➤ Usage

Go here to try the demo.

<wl-nav shadow fixed>
  <div slot="left">
    <img src="/my-logo.svg" alt="logo" />
  </div>
  <span slot="title">My app</span>
  <div slot="right">
    <wl-button>Sign in</wl-button>
  </div>
</wl-nav>

➤ Contributors

Andreas Mehlsen	You?

➤ License

Licensed under MIT.