Navigation (stacked)

<Stack gap="10">

<Flex bg="chakra-body-bg" p={1.5} shadow="base" justify="center" w="full">
	<ButtonGroup variant="navigationStacked" spacing="1">
	    <Button as='a' href='#' p={1.5}><Icon><path d={mdiHomeVariantOutline} /></Icon><Text isTruncated>Home</Text></Button>
	    <Button as='a' href='#' isActive p={1.5}><Icon><path d={mdiAccountMultipleOutline} /></Icon><Text isTruncated>User management</Text></Button>
	    <Button as='a' href='#' p={1.5}><Icon><path d={mdiFileOutline} /></Icon><Text isTruncated>Documents</Text></Button>
	    <Button as='a' href='#' p={1.5}><Icon><path d={mdiArchiveOutline} /></Icon><Text isTruncated>Archive</Text></Button>
	    <Button as='a' href='#' p={1.5}><Icon><path d={mdiCogOutline} /></Icon><Text isTruncated>Settings</Text></Button>
	</ButtonGroup>
</Flex>

<HStack spacing="10">

<Flex bg="chakra-body-bg" p={1.5} shadow="base" justify="center" direction="column">
	<ButtonGroup variant="navigationStacked" spacing="1" orientation="vertical">
	    <Button as='a' href='#' w="3.75rem" p={1.5}><Icon><path d={mdiHomeVariantOutline} /></Icon><Text isTruncated>Home</Text></Button>
	    <Button as='a' href='#' isActive w="3.75rem" p={1.5}><Icon><path d={mdiAccountMultipleOutline} /></Icon><Text isTruncated><span>User management</span></Text></Button>
	    <Button as='a' href='#' w="3.75rem" p={1.5}><Icon><path d={mdiFileOutline} /></Icon><Text isTruncated><span>Documents</span></Text></Button>
	    <Button as='a' href='#' w="3.75rem" p={1.5}><Icon><path d={mdiArchiveOutline} /></Icon><Text isTruncated>Archive</Text></Button>
	    <Button as='a' href='#' w="3.75rem" p={1.5}><Icon><path d={mdiCogOutline} /></Icon><Text isTruncated>Settings</Text></Button>
	</ButtonGroup>
</Flex>

<Flex bg="chakra-body-bg" p={1.5} shadow="base" justify="center" direction="column">
	<ButtonGroup variant="navigationStacked" colorScheme="neutral" spacing="1" orientation="vertical">
	    <Button as='a' href='#' w="3.75rem" p={1.5}><Icon><path d={mdiHomeVariantOutline} /></Icon><Text isTruncated>Home</Text></Button>
	    <Button as='a' href='#' isActive w="3.75rem" p={1.5}><Icon><path d={mdiAccountMultipleOutline} /></Icon><Text isTruncated><span>User management</span></Text></Button>
	    <Button as='a' href='#' w="3.75rem" p={1.5}><Icon><path d={mdiFileOutline} /></Icon><Text isTruncated><span>Documents</span></Text></Button>
	    <Button as='a' href='#' w="3.75rem" p={1.5}><Icon><path d={mdiArchiveOutline} /></Icon><Text isTruncated>Archive</Text></Button>
	    <Button as='a' href='#' w="3.75rem" p={1.5}><Icon><path d={mdiCogOutline} /></Icon><Text isTruncated>Settings</Text></Button>
	</ButtonGroup>
</Flex>

</HStack>

</Stack>