Tabs

Tabs are a great way to display different sections of your website. They can be used to indicate the current section, navigate to the next or previous section, and more.

Default Tabs

A list of tabs with a tab panel.

Source

<Tabs>
    <Menu>
        <TabStrip>
            <Tab Name="groups">Groups</Tab>
            <Tab Name="likes">Likes</Tab>
            <Tab Name="comments">Comments</Tab>
            <Tab Name="saved">Saved</Tab>
        </TabStrip>
    </Menu>
    <TabPanels>
        <TabPanel Name="groups"><strong><u>Groups</u></strong> tab is selected</TabPanel>
        <TabPanel Name="likes"><strong><u>Likes</u></strong> tab is selected</TabPanel>
        <TabPanel Name="comments"><strong><u>Comments</u></strong> tab is selected</TabPanel>
        <TabPanel Name="saved"><strong><u>Saved</u></strong> tab is selected</TabPanel>
    </TabPanels>
</Tabs>

Tabs with icon

A list of tabs with icons and a tab panel.

Source

<Tabs>
    <Menu>
        <TabStrip>
            <Tab Name="groups">Groups</Tab>
            <Tab Name="likes">Likes</Tab>
            <Tab Name="comments">Comments</Tab>
            <Tab Name="saved">Saved</Tab>
        </TabStrip>
    </Menu>
    <TabPanels>
        <TabPanel Name="groups"><strong><u>Groups</u></strong> tab is selected</TabPanel>
        <TabPanel Name="likes"><strong><u>Likes</u></strong> tab is selected</TabPanel>
        <TabPanel Name="comments"><strong><u>Comments</u></strong> tab is selected</TabPanel>
        <TabPanel Name="saved"><strong><u>Saved</u></strong> tab is selected</TabPanel>
    </TabPanels>
</Tabs>

Colored Tabs

A list of colored tabs with a tab panel.

Source

<Tabs SelectedTabName="activity" 
      TabBackgroundSemanticColor="SemanticColor.SurfaceAlt"
      SelectedTabUnderlineSemanticColor="SemanticColor.Warning"
      TabTextSemanticColor="SemanticColor.OnSurface"
      SelectedTabTextSemanticColor="SemanticColor.OnSurfaceStrong">
    <Menu>
        <TabStrip Justify="Justify.Center" SpaceBetween="Size.Medium">
            <Tab Name="activity">Activity</Tab>
            <Tab Name="events">Events</Tab>
            <Tab Name="pages">Pages</Tab>
            <Tab Name="members">Members</Tab>
        </TabStrip>
    </Menu>
    <TabPanels>
        <TabPanel Name="activity" class="bg-surfaceAlt dark:bg-surfaceAltDark rounded-b p-4">Activity Content</TabPanel>
        <TabPanel Name="events" class="bg-surfaceAlt dark:bg-surfaceAltDark rounded-b p-4">Events Content</TabPanel>
        <TabPanel Name="pages" class="bg-surfaceAlt dark:bg-surfaceAltDark rounded-b p-4">Pages Content</TabPanel>
        <TabPanel Name="members" class="bg-surfaceAlt dark:bg-surfaceAltDark rounded-b p-4">Members Content</TabPanel>
    </TabPanels>
</Tabs>