Directory listing

The DirectoryListing component is used 593 times on 587 pages.

See all examples of pages that use DirectoryListing

Used 593 times.

Pages

Partials

Use <DirectoryListing /> to display the directory of a specific folder, which appears as a list of links.

Usage

import { DirectoryListing } from "~/components";

<p>
  <strong>Default</strong>
</p>
<DirectoryListing folder="workers/wrangler" />

<br />

<p>
  <strong>maxDepth</strong>
</p>
<DirectoryListing folder="workers/wrangler" maxDepth={2} />

<p>
  <strong>Descriptions</strong>
</p>
<DirectoryListing folder="workers/wrangler" descriptions />

<p>
  <strong>Button</strong>
</p>
<DirectoryListing folder="workers/wrangler" button />

Props

`folder`

type: string

The folder path to list contents from. If not provided, defaults to the current page's path.

`button`

type: boolean default: false

When enabled, displays the listing as a 3-column grid of button-style cards (sorted alphabetically) instead of a bullet list. The cards match the style of Starlight's LinkCard component.

`descriptions`

type: boolean default: false

When enabled, shows the frontmatter description field for each page in the listing.

`maxDepth`

type: number default: 1

Controls how many levels of nested pages to display. A value of 1 shows only direct children, while higher values will show deeper nesting levels.

`tag`

type: string

Optionally, filter the listing to only pages with a specific tag.

Associated content types

Navigation