OverflowSet

Overview

The OverflowSet is a flexible container component that is useful for displaying a primary set of content with additional content in an overflow callout. Note that the example below is only an example of how to render the component, not a specific use case.

Accessibility

By default, the OverflowSet is simply role=group. If you used as a menu, you will need to add role="menubar" and add proper aria roles to each rendered item (menuitem, menuitemcheckbox, menuitemradio)

Usage

OverflowSet Horizontal Example

<OverflowSet Items=@items OverflowItems=@items GetKey=@(x=> x.Key)>
    <ItemTemplate>
        <CommandBarButton IconName="Add" Text=@context.Name />
    </ItemTemplate>
    <OverflowTemplate>
        <CommandBarButton HideChevron="true" Style="min-width: 0; padding: 0 4px; align-self: stretch;" IconName="more_horizontal" MenuItems=@(itemTransform(context)) />
    </OverflowTemplate>
</OverflowSet>
            
            
OverflowSet VerticalExample

<OverflowSet Items=@smallerItems OverflowItems=@smallerItems Vertical="true" GetKey=@(x=> x.Key)>
    <ItemTemplate>
        <CommandBarButton IconName="Add" Text=@context.Name />
    </ItemTemplate>
    <OverflowTemplate>
        <CommandBarButton HideChevron="true" Style="min-width: 0; padding: 10px; font-size:16px;" IconName="more_horizontal" MenuItems=@(itemTransform(context)) />
    </OverflowTemplate>
</OverflowSet>