t-rail

This component provides an accordion style rail navigation.

Learn more about use-rail which offers a handy way to control t-rail.

Basic Usage

<TRail>
  <TRailItem label="Explore" icon="mdi:magnify" />
  <TRailItem label="Account" icon="mdi:account" />
</TRail>

Deep Nesting, Initial Status and Colors

Settings
<TRail>
  <TRailItem label="Explore" icon="mdi:magnify" color="primary" status={true} push>
    <TRailItem label="Favorites" icon="mdi:heart" color="danger" push>
      <TRailItem label="Posts" push>
        <TRailItem label="Featured" to="/" />
      </TRailItem>
      <TRailItem label="Replies" to="/" />
    </TRailItem>
    <TRailItem label="Settings" icon="mdi:cog" to="/" color="success" />
  </TRailItem>
</TRail>

Shaped

Settings
Settings
<TRail>
  <TRailItem label="Explore" icon="mdi:magnify" color="primary" status={true} shaped>
    <TRailItem label="Favorites" icon="mdi:heart" color="danger" shaped push>
      <TRailItem label="Posts" icon="mdi:heart" shaped push>
        <TRailItem label="Featured" icon="mdi:heart" to="/" shaped push />
      </TRailItem>
      <TRailItem label="Replies" icon="mdi:heart" to="/" shaped push />
    </TRailItem>
    <TRailItem label="Settings" icon="mdi:cog" to="/" color="success" shaped push />
  </TRailItem>
</TRail>

Lazy Deep Nesting

<TRail>
  <TRailItem label="Explore" icon="mdi:magnify" lazy>
    <TRailItem label="Favorites" icon="mdi:heart" to="/" />
    <TRailItem label="Settings" icon="mdi:cog" to="/" />
  </TRailItem>
</TRail>

API

No options available

Components

t-pagination

Components

t-range-slider

Table of Contents