Display long content blocks in a tabbed interface for enhanced readability.

:choco-info: Reference Bootstrap

Choco-theme respects all Bootstrap Tab documentation. Any HTML on the referenced page is valid and will work with choco-theme.

:choco-info: Astro Only Documentation Below

The documentation below covers how to use the <Tab /> Astro Component from choco-astro.

Overview

The scenario keyword for Id's in the examples can be changed to anything, as long as it is consistent. It is important to note that if more than one tabbed interface is present on the page, they can not share the same Id's. Doing so will result in the tabs not working correctly.

Tabs With Anchor Navigation (Default)

By default, when a user clicks on a tab, the url will be appended with the hash so that it can be copied and navigated to. On load, this link will open the selected tab and scroll to it. Click a tab in the example below and inspect the url to see it change.

Tabs Without Anchor Navigation

Sometimes, we do not want tabs to be navigatable. To do this, pass in the updateAnchor: false as seen in the example below. Click on the Scenario 5 tab in the example below and notice the hash in the url does not change.

Trigger Tabs for Chocolatey Versions

Sometimes, multiple tabs in different spots of the page need triggered at the same time. An example of this use case would be on docs.chocolatey.org and separating Chocolatey v1 information from Chocolatey v2. In the example below, clicking the "v2" tab will trigger the other tab container to also navigate to the "v2" tab. This preference is stored as a cookie, and triggered on load as well.

This is achieved by passing in multi="version" to the <TabsTabContainer /> component.