Navigation (stacked)

<Stack gap="10">

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

<HStack spacing="10">

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

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

</HStack>

</Stack>