CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm--vuepress--theme-default

Default theme for VuePress providing navigation, sidebar, search, and responsive documentation layouts

—

Pending
Overview
Eval results
Files

sidebar.mddocs/

Sidebar Components

Sidebar navigation system providing hierarchical document navigation with collapsible groups, active link highlighting, and mobile responsive behavior.

Capabilities

Sidebar Component

Main sidebar container component that displays navigation structure and handles responsive behavior.

/**
 * Main sidebar navigation Vue component
 * Available as @theme/components/Sidebar.vue
 */
const Sidebar: VueComponent = {
  name: 'Sidebar',
  props: {
    items: {
      type: Array,
      required: true
    }
  },
  slots: {
    top: {},    // Top sidebar slot
    bottom: {}  // Bottom sidebar slot  
  },
  emits: ['toggle-sidebar']
};

Props:

  • items (Array, required): Array of sidebar navigation items

Slots:

  • top: Content displayed at top of sidebar
  • bottom: Content displayed at bottom of sidebar

Usage:

<template>
  <Sidebar 
    :items="sidebarItems" 
    @toggle-sidebar="handleToggle"
  >
    <template #top>
      <div>Custom top content</div>
    </template>
    <template #bottom>
      <div>Custom bottom content</div>
    </template>
  </Sidebar>
</template>

SidebarLinks Component

Container component that renders the hierarchical list of sidebar navigation links.

/**
 * Sidebar navigation links container Vue component
 * Available as @theme/components/SidebarLinks.vue
 */
const SidebarLinks: VueComponent = {
  name: 'SidebarLinks',
  props: {
    items: {
      type: Array,
      default: () => []
    },
    depth: {
      type: Number,
      default: 0
    },
    maxDepth: {
      type: Number,
      default: 1
    },
    collapsable: {
      type: Boolean,
      default: true
    }
  }
};

Props:

  • items (Array): Sidebar navigation items
  • depth (Number, default: 0): Current nesting depth
  • maxDepth (Number, default: 1): Maximum depth to render
  • collapsable (Boolean, default: true): Whether groups can be collapsed

SidebarLink Component

Individual sidebar link component with active state handling and nested children support.

/**
 * Individual sidebar link Vue component
 * Available as @theme/components/SidebarLink.vue
 */
const SidebarLink: VueComponent = {
  name: 'SidebarLink',
  props: {
    item: {
      type: Object,
      required: true
    },
    sidebarDepth: {
      type: Number,
      default: 1
    }
  },
  computed: {
    link: String,
    isActive: Boolean,
    displayAllHeaders: Boolean,
    unwrappedHeaders: Array,
    shouldShowChildren: Boolean
  }
};

Props:

  • item (Object, required): Sidebar item configuration
  • sidebarDepth (Number, default: 1): Depth of sidebar nesting to show

SidebarGroup Component

Collapsible group component for organizing related sidebar items.

/**
 * Collapsible sidebar group Vue component
 * Available as @theme/components/SidebarGroup.vue
 */
const SidebarGroup: VueComponent = {
  name: 'SidebarGroup',
  props: {
    item: {
      type: Object,
      required: true
    },
    open: {
      type: Boolean,
      default: false
    },
    collapsable: {
      type: Boolean,
      default: false
    },
    depth: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      isOpen: Boolean
    };
  },
  computed: {
    isActive: Boolean,
    groupClasses: Array
  }
};

Props:

  • item (Object, required): Group configuration object
  • open (Boolean, default: false): Whether group is initially open
  • collapsable (Boolean, default: false): Whether group can be collapsed
  • depth (Number, default: 0): Nesting depth of the group

SidebarButton Component

Mobile sidebar toggle button component for responsive navigation.

/**
 * Mobile sidebar toggle button Vue component
 * Available as @theme/components/SidebarButton.vue
 */
const SidebarButton: VueComponent = {
  name: 'SidebarButton',
  emits: ['toggle-sidebar']
};

Sidebar Configuration

Configure sidebar through themeConfig:

// VuePress config
module.exports = {
  themeConfig: {
    sidebar: {
      // Sidebar for /guide/ section
      '/guide/': [
        {
          title: 'Getting Started',
          collapsable: false,
          children: [
            '/guide/',
            '/guide/installation',
            '/guide/basic-config'
          ]
        },
        {
          title: 'Advanced',
          collapsable: true,
          children: [
            '/guide/custom-themes',
            '/guide/plugins'
          ]
        }
      ],
      
      // Auto-generated sidebar from headers
      '/api/': 'auto',
      
      // Fallback sidebar
      '/': [
        '',
        'getting-started',
        'advanced'
      ]
    },
    
    // Sidebar depth (0 = only h1, 1 = h1+h2, etc.)
    sidebarDepth: 2,
    
    // Display all headers or just active page headers
    displayAllHeaders: false,
    
    // Active header links
    activeHeaderLinks: true
  }
}

Sidebar Item Types

interface SidebarItem {
  /** Item type */
  type?: 'group' | 'page' | 'external' | 'auto';
  /** Display title */
  title?: string;
  /** Link path */
  path?: string;
  /** Child items */
  children?: SidebarItem[];
  /** Whether group is collapsable */
  collapsable?: boolean;
  /** Sidebar depth for this item */
  sidebarDepth?: number;
  /** Initial open group index */
  initialOpenGroupIndex?: number;
}

// Shorthand formats
type SidebarConfig = 
  | SidebarItem[]
  | { [path: string]: SidebarItem[] | 'auto' }
  | 'auto';

Usage Examples:

// Simple array of paths
sidebar: [
  '/',
  '/guide/',
  '/api/'
]

// Array with titles
sidebar: [
  ['/', 'Home'],
  ['/guide/', 'Guide'],
  ['/api/', 'API Reference']
]

// Group configuration
sidebar: [
  {
    title: 'User Guide',
    collapsable: false,
    sidebarDepth: 1,
    children: [
      '/',
      '/guide/'
    ]
  }
]

// Path-specific sidebars
sidebar: {
  '/guide/': [
    {
      title: 'Guide',
      children: ['/guide/', '/guide/installation']
    }
  ],
  '/api/': 'auto'
}

Auto Sidebar Generation

When sidebar: 'auto' is configured, the theme automatically generates sidebar from page headers:

  • Creates groups from h2 headers
  • Nests h3+ headers under h2 parents
  • Includes anchor links for easy navigation
  • Respects sidebarDepth configuration

Install with Tessl CLI

npx tessl i tessl/npm--vuepress--theme-default

docs

global-components.md

index.md

navigation.md

page-layout.md

sidebar.md

theme-configuration.md

utilities.md

tile.json