In computer interface design, a ribbon is a graphical control element in the form of a set of toolbars placed on several tabs. The typical structure of a ribbon includes large, tabbed toolbars, filled with graphical buttons and other graphical control elements, grouped by functionality. Such ribbons use tabs to expose different sets of controls, eliminating the need for numerous parallel toolbars. Contextual tabs are tabs that appear only when the user needs them.
Component sponsored by Octostar.co
- You can contact to sponsor on https://octostar.co/contact-us/
npm install --save @metroui/ribbon-menu
Root element
<RibbonMenu>
...
</RibbonMenu>
Creating menu tabs
<RibbonMenu>
<RibbonTab label="Tab Name" mode={'static' | 'default'}>
...
</RibbonTab>
...
</RibbonMenu>
- RibbonButton
- RibbonToolButton
- RibbonIconButton
- RibbonSplitButton
- RibbonDropdownMenu
- RibbonButtonGroup
<RibbonButton caption={...} icon={...} image={...} title={...} onClick={...}/>
<RibbonButton caption="Mail" icon="mif-envelop" title="Write Mail" onClick={()=>{}}/>
<RibbonToolButton caption={...} icon={...} image={...} onClick={...}/>
<RibbonToolButton caption="Mail" icon="mif-envelop"/>
<RibbonIconButton caption={...} icon={...} image={...} title={...} onClick={...}/>
<RibbonIconButton caption="Mail" icon="mif-envelop"/>
<RibbonSplitButton caption="Options" icon="mif-cog">
<RibbonDropdownMenu>
...
</RibbonDropdownMenu>
</RibbonSplitButton>
<RibbonDropdownMenu>
<RibbonDropdownItem caption="Windows 10"/>
<RibbonDropdownItem caption="Windows 11"/>
<RibbonDropdownItem caption="Office 365"/>
<RibbonDropdownDivider/>
<RibbonDropdownCheckItem checked caption="Windows 10"/>
<RibbonDropdownCheckItem checked caption="Windows 11"/>
<RibbonDropdownCheckItem checked caption="Office 365"/>
<RibbonDropdownDivider/>
<RibbonButtonGroup active={[2]} radio>
<RibbonDropdownItem caption="Windows 10"/>
<RibbonDropdownItem caption="Windows 11"/>
<RibbonDropdownItem caption="Office 365"/>
</RibbonButtonGroup>
<RibbonDropdownDivider/>
<RibbonDropdown>
<RibbonDropdownItem caption="Apps"/>
<RibbonDropdownMenu>
<RibbonDropdownItem caption="Windows 10"/>
<RibbonDropdownItem caption="Windows 11"/>
<RibbonDropdownItem caption="Office 365"/>
<RibbonDropdownDivider/>
<RibbonDropdownCheckItem checked caption="Windows 10"/>
<RibbonDropdownCheckItem checked caption="Windows 11"/>
<RibbonDropdownCheckItem checked caption="Office 365"/>
<RibbonDropdownDivider/>
</RibbonDropdownMenu>
</RibbonDropdown>
</RibbonDropdownMenu>
<RibbonDropdown>
<RibbonIconButton caption="Rocket" icon="mif-rocket"/>
<RibbonDropdownMenu>
...
</RibbonDropdownMenu>
</RibbonDropdown>
<!-- Radio buttons -->
<RibbonButtonGroup radio style={{width: "200px", maxHeight: "88px", }}>
<RibbonIconButton caption="List" icon="mif-list"/>
<RibbonIconButton caption="Gear" icon="mif-cog"/>
<RibbonIconButton caption="Barcode" icon="mif-barcode"/>
<RibbonIconButton caption="Bell" icon="mif-bell"/>
<RibbonIconButton caption="Cast" icon="mif-cast"/>
<RibbonIconButton caption="Calculator" icon="mif-calculator2"/>
</RibbonButtonGroup>
<!-- Check buttons -->
<RibbonButtonGroup style={{width: "100px"}}>
<RibbonIconButton caption="Italic" icon="mif-italic"/>
<RibbonIconButton caption="Bold" icon="mif-bold"/>
<RibbonIconButton caption="Underline" icon="mif-underline"/>
</RibbonButtonGroup>
<!-- Preset active state -->
<RibbonButtonGroup active={[1, 3]}>
<RibbonToolButton caption="Italic" icon="mif-italic"/>
<RibbonToolButton caption="Bold" icon="mif-bold"/>
<RibbonToolButton caption="Underline" icon="mif-underline"/>
</RibbonButtonGroup>
<RibbonDropdownMenu>
<RibbonDropdownCheckItem checked caption="Windows 10" onClick={(e)=>{...}}/>
<RibbonDropdownCheckItem checked caption="Windows 11"/>
<RibbonDropdownCheckItem checked caption="Office 365"/>
</RibbonDropdownMenu>
or
<RibbonDropdownMenu>
<RibbonButtonGroup active={2}>
<RibbonDropdownItem caption="Windows 10" onClick={(e)=>{...}}/>
<RibbonDropdownItem caption="Windows 11"/>
<RibbonDropdownItem caption="Office 365"/>
</RibbonButtonGroup>
</RibbonDropdownMenu>
<RibbonDropdownMenu>
<RibbonButtonGroup active={2} radio>
<RibbonDropdownItem caption="Windows 10" onClick={(e)=>{...}}/>
<RibbonDropdownItem caption="Windows 11"/>
<RibbonDropdownItem caption="Office 365"/>
</RibbonButtonGroup>
</RibbonDropdownMenu>
Original component created by Serhii Pimenov for Metro UI.
MetroUI is an open-source frontend toolkit inspired by Microsoft Fluent (former Metro) design principles. You can consider it as a Bootstrap replacement for web sites that need a fresh and catchy look. MetroUI includes everything you need to build your frontend app: responsive grid system, 100+ prebuilt components, 500+ incons, and powerful JavaScript plugins.
Ribbon Menu component is open-source project licensed by MIT license
Copyright 2022 by Serhii Pimenov, Korzh.com.