Menus allow you to describe the site navigation structure in a simple declarative way. Menus come in two steps:

  1. Defining a file that contains the menu structure for the directory it's in.
  2. Using the useContent() function to retrieve the menu structure in a template for rendering. Read more here

File Structure

First layout files as follows:

โ””โ”€โ”€ routes/
    โ””โ”€โ”€ some/
        โ”œโ”€โ”€ layout.tsx
        โ””โ”€โ”€ path/
            โ””โ”€โ”€ index.tsx  #

Navigating to activates:

  • src/routes/some/path/index.tsx: This component will be used for rendering the page content.
  • src/routes/some/layout.tsx: This layout will be used to provide content around the src/routes/some/path/index.tsx. Internally the layout can use src/routes/some/ to render the menus.
  • src/routes/some/ This file will be used to declare the menu structure which will be rendered by src/routes/some/layout.tsx.

Declaring Menu Structure

Use to declare the menu structure.

  • Use the headings (#, ##, etc..) to define menu depth
  • Use the bulleted list (-) to define menu items.
<!-- File: src/routes/some/ -->

# Docs

## Getting Started

- [Introduction](introduction/

## Components

- [Basics](/docs/components/basics/index.mdx)

Retrieving Menu Structure

At runtime, any component can retrieve the menu with useContent() hook. The type returned is ContentMenu.

The example above will return:

  text: "Docs",
  items: [
      text: "Getting Started",
      items: [
          text: "Introduction",
          href: "/docs/introduction"
      text: "Components",
      items: [
          text: "Basics",
          href: "/docs/components/basics"

Using ContentMenu in a layout

While useContent() can be invoked from any component that is part of the current route. It is typically used in a layout component (or a component used by layout) to render the menu. An example usage is shown here:

export default component$(() => {
  const { menu } = useContent();
  const { pathname } = useLocation();

  return (
    <div class="menu">
        ? menu.items?.map((item) => (
                {item.items?.map((item) => (
                        'is-active': pathname === item.href,
        : null}
Made with โค๏ธ by