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

Examples

MenuList.jsx
import React, { useState } from 'react';
import {
Page,
Navbar,
NavbarBackLink,
Block,
MenuList,
MenuListItem,
} from 'tailwind-mobile/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>
<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={() => 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>
<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.
2021 © Tailwind Mobile by nolimits4web.