Navigation (side)

<Stack spacing='10' divider={<StackDivider />}>

// Side nav
<Wrap direction="column">
	<ButtonGroup variant="navigation" orientation="vertical" spacing="1" mx="-2">
	    <Button as='a' href='#' leftIcon={<Icon><path d={mdiHomeVariantOutline} /></Icon>} >Nav link</Button>
	    <Button as='a' href='#' leftIcon={<Icon><path d={mdiAccountMultipleOutline} /></Icon>} isActive>Nav link isActive</Button>
	    <Button as='a' href='#' leftIcon={<Icon><path d={mdiFileOutline} /></Icon>} >Nav link</Button>
	    <Button as='a' href='#' leftIcon={<Icon><path d={mdiArchiveOutline} /></Icon>} >Nav link</Button>
	    <Button as='a' href='#' leftIcon={<Icon><path d={mdiCogOutline} /></Icon>} >Nav link</Button>
	</ButtonGroup>
</Wrap>

// Side nav with subsections
<Wrap direction="column">
    <Heading variant="section">Section heading</Heading>
    <ButtonGroup variant="navigation" orientation="vertical" spacing="1" mx="-2" mb="4">
        <Button as='a' href='#' leftIcon={<Icon><path d={mdiHomeVariantOutline} /></Icon>} >Nav link</Button>
        <Button as='a' href='#' leftIcon={<Icon><path d={mdiAccountMultipleOutline} /></Icon>} isActive>Nav link isActive</Button>
        <Button as='a' href='#' leftIcon={<Icon><path d={mdiFileOutline} /></Icon>} >Nav link</Button>
    </ButtonGroup>
    <Heading variant="section">Section heading</Heading>
    <ButtonGroup variant="navigation" orientation="vertical" spacing="1" mx="-2" mb="4">
        <Button as='a' href='#' leftIcon={<Icon><path d={mdiArchiveOutline} /></Icon>} >Nav link</Button>
        <Button as='a' href='#' leftIcon={<Icon><path d={mdiCogOutline} /></Icon>} >Nav link</Button>
    </ButtonGroup>
</Wrap>

</Stack>