# Indent You can specify `indent` & `root-indent` of the menu. `root-indent` only determines the first-leveled children. ```html ``` ```js import { h, resolveComponent } from 'vue' import bookIcon from 'naive-ui/lib/icons/book-outline.vue' import personIcon from 'naive-ui/lib/icons/person-outline.vue' import wineIcon from 'naive-ui/lib/icons/wine-outline.vue' function renderIcon(icon) { return () => h(resolveComponent('n-icon'), null, { default: () => h(icon) }) } const menuItems = [ { title: 'Hear the Wind Sing', key: 'hear-the-wind-sing', icon: renderIcon(bookIcon) }, { title: 'Pinball 1973', key: 'pinball-1973', icon: renderIcon(bookIcon), disabled: true, children: [ { title: 'Rat', key: 'rat' } ] }, { title: 'A Wild Sheep Chase', key: 'a-wild-sheep-chase', disabled: true, icon: renderIcon(bookIcon) }, { title: '舞,舞,舞', key: 'Dance Dance Dance', icon: renderIcon(bookIcon), children: [ { type: 'group', title: 'People', key: 'people', children: [ { title: 'Narrator', key: 'narrator', icon: renderIcon(personIcon) }, { title: 'Sheep Man', key: 'sheep-man', icon: renderIcon(personIcon) } ] }, { title: 'Beverage', key: 'beverage', icon: renderIcon(wineIcon), children: [ { title: 'Whisky', key: 'whisky' } ] }, { title: 'Food', key: 'food', children: [ { title: 'Sandwich', key: 'sandwich' } ] }, { title: 'The past increases. The future recedes.', key: 'the-past-increases-the-future-recedes' } ] } ] export default { data () { return { activeKey: null, menuItems } } } ```