Header

Improved and redesigned header now allows making the header fixed and adding a logo image.

Config

Inside doczrc.js file there is a themeConfig.header.fixed option:

//doczrc.js
export default {
  themeConfig: {
    header: {
      fixed: true,
    },
  },
};

Options

Name	Type	Default	Description
fixed	`boolean`	false	Specify if the header should be fixed at the top.

Logo

Inside doczrc.js file there is a themeConfig.logo option with a possibility to define logos for light and dark theme.

The image has to be placed inside the public folder or the provided option has to be an url address.

//doczrc.js
export default {
  themeConfig: {
    logo: {
      src: '/public/logo.svg',
      width: 50,
    },
  },
};

Example with an url:

//doczrc.js
export default {
  themeConfig: {
    logo: {
      src: 'https://www.my-website.com/logo.svg',
      width: 50,
    },
  },
};

Example with a light and dark theme logo option:

//doczrc.js
export default {
  themeConfig: {
    logo: {
      src: {
        light: '/public/logo.svg',
        dark: 'https://www.my-website.com/logo-dark.svg',
      },
      width: 50,
    },
  },
};

Options

Name	Type	Default	Description
src	`string` \| `object`	—	Specify the image source as an path or url.
width	`string` \| `number`	`75px`	Specify the image width.

Icons

Inside doczrc.js file there is a themeConfig.header.icons option:

//doczrc.js
export default {
  themeConfig: {
    header: {
      icons: 'minimal',
    },
  },
};

Options

Name	Type	Default	Description
icons	`'minimal'` \| `'default'`	`default`	Specify the header icons style.

Header

Fixed header

Options

Logo

Options

Icons

Options