skip to the main content

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
<RzTabs>
    <Menu>
        <RzTabStrip>
            <RzTab Name="groups">Groups</Tab>
            <RzTab Name="likes">Likes</Tab>
            <RzTab Name="comments">Comments</Tab>
            <RzTab Name="saved">Saved</Tab>
        </TabStrip>
    </Menu>
    <TabPanels>
        <RzTabPanel Name="groups"><strong><u>Groups</u></strong> tab is selected</TabPanel>
        <RzTabPanel Name="likes"><strong><u>Likes</u></strong> tab is selected</TabPanel>
        <RzTabPanel Name="comments"><strong><u>Comments</u></strong> tab is selected</TabPanel>
        <RzTabPanel Name="saved"><strong><u>Saved</u></strong> tab is selected</TabPanel>
    </TabPanels>
</RzTabs>

Tabs with icon

A list of tabs with icons and a tab panel.

Source
<RzTabs>
    <Menu>
        <RzTabStrip>
            <RzTab Name="groups">Groups</RzTab>
            <RzTab Name="likes">Likes</RzTab>
            <RzTab Name="comments">Comments</RzTab>
            <RzTab Name="saved">Saved</RzTab>
        </TabStrip>
    </Menu>
    <TabPanels>
        <RzTabPanel Name="groups"><strong><u>Groups</u></strong> tab is selected</RzTabPanel>
        <RzTabPanel Name="likes"><strong><u>Likes</u></strong> tab is selected</RzTabPanel>
        <RzTabPanel Name="comments"><strong><u>Comments</u></strong> tab is selected</RzTabPanel>
        <RzTabPanel Name="saved"><strong><u>Saved</u></strong> tab is selected</RzTabPanel>
    </TabPanels>
</RzTabs>

Colored Tabs

A list of colored tabs with a tab panel.

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