---
title: "Customization"
description: "Override built-in components by creating Vue files of the same name in the components/ directory. A complete customization guide covering every interface area, including the header logo, desktop navigation menu, mobile drawer, footer, left/right sidebar slots, and the theme picker, with links to the default component source code."
canonical_url: "https://docs.mhaibaraai.cn/en/docs/getting-started/customization"
---
# Customization

> Override built-in components by creating Vue files of the same name in the components/ directory. A complete customization guide covering every interface area, including the header logo, desktop navigation menu, mobile drawer, footer, left/right sidebar slots, and the theme picker, with links to the default component source code.

> [!TIP]
> 
> Create a Vue file of the same name in the 
> 
> components/
> 
>  directory to override a component.

## Header

The complete navigation system at the top of the page, composed of multiple sub-components.

### `Header`

The main container component that brings together all header sub-components, including the logo, navigation menu, search, theme picker, and more.

You can fully customize the entire header structure by creating `components/header/Header.vue`.

### `HeaderLogo`

Displays the site logo and name, with link support.

![HeaderLogo](https://docs.mhaibaraai.cn/components/HeaderLogo.png)

[](https://github.com/mhaibaraai/movk-nuxt-docs/blob/main/layer/app/components/header/HeaderLogo.vue)

### `HeaderCenter`

The desktop navigation menu, which renders the configured navigation links using the `UNavigationMenu` component.

![HeaderCenter](https://docs.mhaibaraai.cn/components/HeaderCenter.png)

[](https://github.com/mhaibaraai/movk-nuxt-docs/blob/main/layer/app/components/header/HeaderCenter.vue)

You can customize the menu content via `desktopLinks` from the `useHeader()` composable.

### `HeaderBody`

The mobile navigation content, including the responsive navigation menu and the documentation table-of-contents navigation.

[](https://github.com/mhaibaraai/movk-nuxt-docs/blob/main/layer/app/components/header/HeaderBody.vue)

### `HeaderBottom`

A secondary navigation dedicated to documentation pages, displaying the main documentation categories as tabs.

![HeaderBottom](https://docs.mhaibaraai.cn/components/HeaderBottom.png)

[](https://github.com/mhaibaraai/movk-nuxt-docs/blob/main/layer/app/components/header/HeaderBottom.vue)

Only displayed when visiting `/docs/` paths.

### `HeaderCTA`

The call-to-action area on the right side of the header. By default it shows a "Get Started" button on the home page and the AI chat entry on other pages.

![HeaderCTA](https://docs.mhaibaraai.cn/components/HeaderCTA.png)

[](https://github.com/mhaibaraai/movk-nuxt-docs/blob/main/layer/app/components/header/HeaderCTA.vue)

## Page components

### `PageHeaderLinks`

The action menu on the right side of a documentation page's title, providing features such as copy page, copy link, view source, AI chat, and MCP server by default.

![PageHeaderLinks](https://docs.mhaibaraai.cn/components/PageHeaderLinks.png)

[](https://github.com/mhaibaraai/movk-nuxt-docs/blob/main/layer/app/components/PageHeaderLinks.vue)

### `DocsAsideLeftTop`

The top slot of the left sidebar on documentation pages (the `#top` sticky area of `UPageAside`). By default it hosts the navigation filter box: shown when [`aside.filter.enabled`](https://docs.mhaibaraai.cn/en/docs/getting-started/configuration) is enabled and the number of navigation items in the current group reaches the threshold.

![DocsAsideLeftTop](https://docs.mhaibaraai.cn/components/DocsAsideLeftTop.png)

[](https://github.com/mhaibaraai/movk-nuxt-docs/blob/main/layer/app/components/DocsAsideLeftTop.vue)

Create `components/DocsAsideLeftTop.vue` to display custom content above the left navigation.

### `DocsAsideLeftBody`

The main content slot of the left sidebar on documentation pages. By default it renders the category navigation for the current documentation section, filtering by title and description when there is input in the filter box.

![DocsAsideLeftBody](https://docs.mhaibaraai.cn/components/DocsAsideLeftBody.png)

[](https://github.com/mhaibaraai/movk-nuxt-docs/blob/main/layer/app/components/DocsAsideLeftBody.vue)

Create `components/DocsAsideLeftBody.vue` to display custom content in the main area of the left navigation.

### `DocsAsideRightBottom`

The bottom slot of the right sidebar on documentation pages, an empty placeholder component by default.

![DocsAsideRightBottom](https://docs.mhaibaraai.cn/components/DocsAsideRightBottom.png)

[](https://github.com/mhaibaraai/movk-nuxt-docs/blob/main/layer/app/components/DocsAsideRightBottom.vue)

Create `components/DocsAsideRightBottom.vue` to display custom content below the right-hand table of contents.

## Footer

The layout component at the bottom of the page.

### `Footer`

The main container component that brings together the left and right footer content, including the divider and layout styles.

![Footer](https://docs.mhaibaraai.cn/components/Footer.png)

[](https://github.com/mhaibaraai/movk-nuxt-docs/blob/main/layer/app/components/footer/Footer.vue)

### `FooterLeft`

The left footer area, which displays credits configured via `footer.credits` in `app/app.config.ts`.

![FooterLeft](https://docs.mhaibaraai.cn/components/FooterLeft.png)

[](https://github.com/mhaibaraai/movk-nuxt-docs/blob/main/layer/app/components/footer/FooterLeft.vue)

### `FooterRight`

The right footer area, which displays social media link buttons configured via `footer.socials` in `app/app.config.ts`.

![FooterRight](https://docs.mhaibaraai.cn/components/FooterRight.png)

[](https://github.com/mhaibaraai/movk-nuxt-docs/blob/main/layer/app/components/footer/FooterRight.vue)

## ThemePicker

### `ThemePicker`

A theme customization tool with a visual interface for adjusting:

- **Primary**: the primary color (can be set to black or a preset color)
- **Neutral**: the neutral color
- **Radius**: the border radius size (0-3)
- **Icons**: icon set selection
- **Color Mode**: color mode (light / dark / system)

After making changes, you can export the CSS variables or the `app/app.config.ts` configuration.

[](https://github.com/mhaibaraai/movk-nuxt-docs/blob/main/layer/app/components/theme-picker/ThemePicker.vue)

### `ThemePickerButton`

A button component used internally by the theme picker for selecting options such as colors and border radius.

[](https://github.com/mhaibaraai/movk-nuxt-docs/blob/main/layer/app/components/theme-picker/ThemePickerButton.vue)


## Sitemap

See the full [sitemap](https://docs.mhaibaraai.cn/sitemap.md) for all pages.