Menu List Vue Component

Menu List is not a separate component, but just a particular case of using <f7-list> and <f7-list-item> components.

To enable Menu List we need to add menu-list prop to f7-list component, and control currently selected menu list item by setting selected prop on relevant f7-list-item

Examples

<template>
<f7-page>
  <f7-navbar title="Menu List" />

  <f7-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>
  </f7-block>

  <f7-list menu-list>
    <f7-list-item
      link
      title="Home"
      :selected="selected === 'home'"
      @click="() => (selected = 'home')"
    >
      <template #media>
        <f7-icon md="material:home" aurora="f7:house_fill" ios="f7:house_fill" />
      </template>
    </f7-list-item>
    <f7-list-item
      link
      title="Profile"
      :selected="selected === 'profile'"
      @click="() => (selected = 'profile')"
    >
      <template #media>
        <f7-icon md="material:person" aurora="f7:person_fill" ios="f7:person_fill" />
      </template>
    </f7-list-item>
    <f7-list-item
      link
      title="Settings"
      :selected="selected === 'settings'"
      @click="() => (selected = 'settings')"
    >
      <template #media>
        <f7-icon md="material:settings" aurora="f7:gear_alt_fill" ios="f7:gear_alt_fill" />
      </template>
    </f7-list-item>
  </f7-list>

  <f7-list menu-list media-list>
    <f7-list-item
      link
      title="Home"
      subtitle="Home subtitle"
      :selected="selectedMedia === 'home'"
      @click="() => (selectedMedia = 'home')"
    >
      <template #media>
        <f7-icon md="material:home" aurora="f7:house_fill" ios="f7:house_fill" />
      </template>
    </f7-list-item>
    <f7-list-item
      link
      title="Profile"
      subtitle="Profile subtitle"
      :selected="selectedMedia === 'profile'"
      @click="() => (selectedMedia = 'profile')"
    >
      <template #media>
        <f7-icon md="material:person" aurora="f7:person_fill" ios="f7:person_fill" />
      </template>
    </f7-list-item>
    <f7-list-item
      link
      title="Settings"
      subtitle="Settings subtitle"
      :selected="selectedMedia === 'settings'"
      @click="() => (selectedMedia = 'settings')"
    >
      <template #media>
        <f7-icon md="material:settings" aurora="f7:gear_alt_fill" ios="f7:gear_alt_fill" />
      </template>
    </f7-list-item>
  </f7-list>
</f7-page>
</template>
<script>
import { ref } from 'vue';

export default {
  setup() {
    const selected = ref('home');
    const selectedMedia = ref('home');
    return {
      selected,
      selectedMedia,
    };
  },
};
</script>