layout component

MobileNavigation

Reusable mobile navigation component.

@wrnexus/ui 0.2.674 props0 slots1 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<MobileNavigation
  label="Menu"
  closeLabel="Close menu"
  items="[]"
/>

Legacy mount name: data-component="MobileNavigation".

Props and attributes

Prop	Type	Requirement	Default
`label`	`string`	Optional	`"Menu"`
`closeLabel`	`string`	Optional	`"Close menu"`
`items`	`string`	Optional	`[]`
`class`	`string`	Optional	`""`

Slots

This component does not declare a slot.

Events

click

Source contract

Installed source: components/MobileNavigation.wrn

component MobileNavigation {
  props {
    label = "Menu"
    closeLabel = "Close menu"
    items = []
    class = ""
  }
  state open = false
  view {
        <div class="wire-mobile-nav {class}">
        <button type="button" class="wire-btn wire-btn--ghost" aria-expanded="{open}" aria-controls="wire-mobile-navigation" @click="open = !open">{open ? closeLabel : label}</button>
        <nav id="wire-mobile-navigation" data-show="open" aria-label="Mobile navigation" class="wire-mobile-nav__panel">
        <ul>{#each items as item}<li>
        <a href="{item.href}">{item.label}</a>
        </li>{/each}</ul>
        </nav>
        </div>
    }
}