Menu List Svelte Component

Menu List is an extension of List View. Menu List unlike usual links list is designed to indicate currently active screen (or section) of your app. Think about it like a Tabbar but in a form of a list.

Menu List Components

There are following components included:

  • MenuList - menu list component
  • MenuListItem - menu list item element

MenuList Props

MenuList component doesn't have specific props, but as it extends List component, it supports all List props

MenuListItem Props

MenuListItem component extends ListItem component, it supports all ListItem props, ListItem slots and the following additional props:

NameTypeDefaultDescription
activebooleanfalse

Makes menu list item highlighted (active)

hrefstring | boolean

Menu list item link's href attribute

subtitlestring

Content of the menu list item "subtitle" area

Examples

MenuList.svelte
<script>
  import {
    Page,
    Navbar,
    NavbarBackLink,
    Block,
    MenuList,
    MenuListItem,
  } from 'konsta/svelte';
  import DemoIcon from '../components/DemoIcon.svelte';


  let selected = 'home';
  let selectedMedia = 'home';
</script>


<Page>
  <Navbar title="Menu List" />


  <Block strong>
    <p>
      Menu list unlike usual links list is designed to indicate currently active
      screen (or section) of your app. Think about it like a Tabbar but in a
      form of a list.
    </p>
  </Block>
  <MenuList>
    <MenuListItem
      title="Home"
      active={selected === 'home'}
      onClick={() => (selected = 'home')}
    >
      <DemoIcon slot="media" />
    </MenuListItem>
    <MenuListItem
      title="Profile"
      active={selected === 'profile'}
      onClick={() => (selected = 'profile')}
    >
      <DemoIcon slot="media" />
    </MenuListItem>
    <MenuListItem
      title="Settings"
      active={selected === 'settings'}
      onClick={() => (selected = 'settings')}
    >
      <DemoIcon slot="media" />
    </MenuListItem>
  </MenuList>


  <MenuList>
    <MenuListItem
      title="Home"
      subtitle="Home subtitle"
      active={selectedMedia === 'home'}
      onClick={() => (selectedMedia = 'home')}
    >
      <DemoIcon slot="media" />
    </MenuListItem>
    <MenuListItem
      title="Profile"
      subtitle="Profile subtitle"
      active={selectedMedia === 'profile'}
      onClick={() => (selectedMedia = 'profile')}
    >
      <DemoIcon slot="media" />
    </MenuListItem>
    <MenuListItem
      title="Settings"
      subtitle="Settings subtitle"
      active={selectedMedia === 'settings'}
      onClick={() => (selectedMedia = 'settings')}
    >
      <DemoIcon slot="media" />
    </MenuListItem>
  </MenuList>
</Page>
Code licensed under MIT.
2022 © Konsta UI by nolimits4web.