🔥 Meet Our New Project: t0ggles - Your Ultimate Project Management Tool! 🔥

Menu List React 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 and the following additional props:

NameTypeDefaultDescription
activebooleanfalse

Makes menu list item highlighted (active)

hrefstring | boolean

Menu list item link's href attribute

mediaReactNode

Content of the chip media area (e.g. icon)

subtitleReactNode

Content of the menu list item "subtitle" area

Examples

MenuList.jsx
import React, { useState } from 'react';
import {
Page,
Navbar,
NavbarBackLink,
Block,
MenuList,
MenuListItem,
} from 'konsta/react';
import DemoIcon from '../components/DemoIcon';
export default function MenuListPage() {
const [selected, setSelected] = useState('home');
const [selectedMedia, setSelectedMedia] = useState('home');
return (
<Page>
<Navbar
title="Menu List"
/>
<Block strong inset>
<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 strongIos outlineIos>
<MenuListItem
title="Home"
active={selected === 'home'}
onClick={() => setSelected('home')}
media={<DemoIcon />}
/>
<MenuListItem
title="Profile"
active={selected === 'profile'}
onClick={() => setSelected('profile')}
media={<DemoIcon />}
/>
<MenuListItem
title="Settings"
active={selected === 'settings'}
onClick={() => setSelected('settings')}
media={<DemoIcon />}
/>
</MenuList>
<MenuList strongIos outlineIos>
<MenuListItem
title="Home"
subtitle="Home subtitle"
active={selectedMedia === 'home'}
onClick={() => setSelectedMedia('home')}
media={<DemoIcon />}
/>
<MenuListItem
title="Profile"
subtitle="Profile subtitle"
active={selectedMedia === 'profile'}
onClick={() => setSelectedMedia('profile')}
media={<DemoIcon />}
/>
<MenuListItem
title="Settings"
subtitle="Settings subtitle"
active={selectedMedia === 'settings'}
onClick={() => setSelectedMedia('settings')}
media={<DemoIcon />}
/>
</MenuList>
</Page>
);
}
Code licensed under MIT.
2022 © Konsta UI by nolimits4web.