Default Theme: Layout

Configure the layout options for your VitePress site.

Layout Types

VitePress provides several built-in layout types that you can use via frontmatter.

Default Layout

The default layout includes header, sidebar, content area, and footer:

---
layout: doc
---

Home Layout

Special layout for landing pages:

---
layout: home

hero:
  name: VitePress
  text: Vite & Vue powered static site generator
  tagline: Simple, powerful, and performant. Meet the modern SSG framework you've always wanted.
  actions:
    - theme: brand
      text: Get Started
      link: /guide/getting-started
    - theme: alt
      text: View on GitHub
      link: https://github.com/vuejs/vitepress

features:
  - title: "Vite: The DX that can't be beat"
    details: Feel the speed of Vite. Instant server start and lightning fast HMR that stays fast regardless of the app size.
  - title: Designed to be simplicity first
    details: With Markdown-centered content, it's built to help you focus on writing and deployed with minimum configuration.
  - title: Power of Vue meets Markdown
    details: Enhance your content with all the features of Vue in Markdown, while being able to customize your site with Vue.
---

Page Layout

Simple layout without sidebar:

---
layout: page
---

Custom Layout

You can create custom layouts:

---
layout: custom
---

Layout Components

Header

Configure the site header:

export default {
  themeConfig: {
    siteTitle: 'My Site',
    logo: '/logo.svg',
    nav: [
      { text: 'Home', link: '/' },
      { text: 'Guide', link: '/guide/' }
    ]
  }
}

Footer

Configure the site footer:

export default {
  themeConfig: {
    footer: {
      message: 'Released under the MIT License.',
      copyright: 'Copyright © 2023-present Evan You'
    }
  }
}

Sidebar

Configure the sidebar navigation:

export default {
  themeConfig: {
    sidebar: [
      {
        text: 'Guide',
        items: [
          { text: 'Introduction', link: '/introduction' },
          { text: 'Getting Started', link: '/getting-started' }
        ]
      }
    ]
  }
}

Layout Slots

Custom Content

You can add custom content to specific layout slots:

<template>
  <Layout>
    <template #nav-bar-title-after>
      <span>Custom Title</span>
    </template>
    
    <template #nav-bar-content-after>
      <div>Custom Nav Content</div>
    </template>
    
    <template #sidebar-nav-before>
      <div>Before Sidebar</div>
    </template>
    
    <template #sidebar-nav-after>
      <div>After Sidebar</div>
    </template>
    
    <template #page-top>
      <div>Page Top</div>
    </template>
    
    <template #page-bottom>
      <div>Page Bottom</div>
    </template>
    
    <template #not-found>
      <div>Custom 404 Page</div>
    </template>
  </Layout>
</template>

Responsive Design

The default theme is fully responsive and adapts to different screen sizes:

• Desktop: Full layout with sidebar
• Tablet: Collapsible sidebar
• Mobile: Hidden sidebar with hamburger menu

CSS Variables

Customize layout spacing and dimensions:

:root {
  --vp-layout-max-width: 1440px;
  --vp-sidebar-width: 272px;
  --vp-nav-height: 64px;
}