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.

There are following components included:

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

MenuList component doesn't have specific props, but as it extends List component, it supports all List 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.