Back to site

Side

Sidebar navigation with expandable sections.

---
import Side from "@navigation/side/Side.astro";
---

<Side
navData={
  [
    {
      "name": "Getting Started",
      "path": "#",
      "children": [
        {
          "name": "Introduction",
          "path": "#",
          "children": []
        },
        {
          "name": "Installation",
          "path": "#",
          "children": []
        },
        {
          "name": "Quick Start",
          "path": "#",
          "children": []
        }
      ]
    },
    {
      "name": "Components",
      "path": "#",
      "children": [
        {
          "name": "Blocks",
          "path": "#",
          "children": [
            {
              "name": "Hero",
              "path": "#"
            },
            {
              "name": "Footer",
              "path": "#"
            },
            {
              "name": "Main Nav",
              "path": "#"
            }
          ]
        },
        {
          "name": "Elements",
          "path": "#",
          "children": [
            {
              "name": "Button",
              "path": "#"
            },
            {
              "name": "Icon",
              "path": "#"
            }
          ]
        },
        {
          "name": "Typography",
          "path": "#",
          "children": []
        }
      ]
    },
    {
      "name": "Guides",
      "path": "#",
      "children": [
        {
          "name": "Theming",
          "path": "#",
          "children": []
        },
        {
          "name": "Styling",
          "path": "#",
          "children": []
        }
      ]
    },
    {
      "name": "About",
      "path": "#",
      "children": []
    }
  ]
}
/>
---
blocks:
  _component: navigation/side
  navData:
    - name: Getting Started
      path: '#'
      children:
        - name: Introduction
          path: '#'
          children: []
        - name: Installation
          path: '#'
          children: []
        - name: Quick Start
          path: '#'
          children: []
    - name: Components
      path: '#'
      children:
        - name: Blocks
          path: '#'
          children:
            - name: Hero
              path: '#'
            - name: Footer
              path: '#'
            - name: Main Nav
              path: '#'
        - name: Elements
          path: '#'
          children:
            - name: Button
              path: '#'
            - name: Icon
              path: '#'
        - name: Typography
          path: '#'
          children: []
    - name: Guides
      path: '#'
      children:
        - name: Theming
          path: '#'
          children: []
        - name: Styling
          path: '#'
          children: []
    - name: About
      path: '#'
      children: []
---

Overview

Displays a vertical sidebar with expandable sections for organizing navigation links. Commonly used in documentation sites with nested menus.

Properties

navData array | default: array

Array of navigation items with name, path, and optional children (up to 3 levels).

Item Properties:

name string

The display text for the navigation item.

path string

The URL/path for the navigation item.

children array

Optional nested navigation items (level 2).

Item Properties:

name string

The display text for the navigation item.

path string

The URL/path for the navigation item.

children array

Optional nested navigation items (level 3, final level).

Item Properties:

name string

The display text for the navigation item.

path string

The URL/path for the navigation item.