A menu button is a menu item that displays a word or phrase that the user can click to initiate an operation.
Notes
The BitMenuButton is a Multi-API component which can accept the list of Items in 3 different ways: BitMenuButtonItem class, a custom Generic class, and BitMenuButtonOption component.
Usage
ItemCustomOption
Basic
Show code
MenuButton
Item A
Item B
Item C
Split
Show code
Explore the Split behavior of BitMenuButton, demonstrating buttons divided into two sections. One section triggers an action on click, while the other section opens a callout to reveal additional options.
Split
Item A
Item B
Item C
Variant
Show code
The MenuButton offers three variants: Fill (default), Outline, and Text.
Fill
Item A
Item B
Item C
Outline
Item A
Item B
Item C
Text
Item A
Item B
Item C
Fill
Item A
Item B
Item C
Outline
Item A
Item B
Item C
Text
Item A
Item B
Item C
Fill
Item A
Item B
Item C
Outline
Item A
Item B
Item C
Text
Item A
Item B
Item C
Fill
Item A
Item B
Item C
Outline
Item A
Item B
Item C
Text
Item A
Item B
Item C
Color
Show code
Offering a range of specialized color variants with Primary being the default, providing visual cues for specific actions or states within your application.
Primary
Item A
Item B
Item C
Primary
Item A
Item B
Item C
Primary
Item A
Item B
Item C
Primary
Item A
Item B
Item C
Primary
Item A
Item B
Item C
Primary
Item A
Item B
Item C
Secondary
Item A
Item B
Item C
Secondary
Item A
Item B
Item C
Secondary
Item A
Item B
Item C
Secondary
Item A
Item B
Item C
Secondary
Item A
Item B
Item C
Secondary
Item A
Item B
Item C
Tertiary
Item A
Item B
Item C
Tertiary
Item A
Item B
Item C
Tertiary
Item A
Item B
Item C
Tertiary
Item A
Item B
Item C
Tertiary
Item A
Item B
Item C
Tertiary
Item A
Item B
Item C
Info
Item A
Item B
Item C
Info
Item A
Item B
Item C
Info
Item A
Item B
Item C
Info
Item A
Item B
Item C
Info
Item A
Item B
Item C
Info
Item A
Item B
Item C
Success
Item A
Item B
Item C
Success
Item A
Item B
Item C
Success
Item A
Item B
Item C
Success
Item A
Item B
Item C
Success
Item A
Item B
Item C
Success
Item A
Item B
Item C
Warning
Item A
Item B
Item C
Warning
Item A
Item B
Item C
Warning
Item A
Item B
Item C
Warning
Item A
Item B
Item C
Warning
Item A
Item B
Item C
Warning
Item A
Item B
Item C
SevereWarning
Item A
Item B
Item C
SevereWarning
Item A
Item B
Item C
SevereWarning
Item A
Item B
Item C
SevereWarning
Item A
Item B
Item C
SevereWarning
Item A
Item B
Item C
SevereWarning
Item A
Item B
Item C
Error
Item A
Item B
Item C
Error
Item A
Item B
Item C
Error
Item A
Item B
Item C
Error
Item A
Item B
Item C
Error
Item A
Item B
Item C
Error
Item A
Item B
Item C
PrimaryBackground
Item A
Item B
Item C
PrimaryBackground
Item A
Item B
Item C
PrimaryBackground
Item A
Item B
Item C
PrimaryBackground
Item A
Item B
Item C
PrimaryBackground
Item A
Item B
Item C
PrimaryBackground
Item A
Item B
Item C
SecondaryBackground
Item A
Item B
Item C
SecondaryBackground
Item A
Item B
Item C
SecondaryBackground
Item A
Item B
Item C
SecondaryBackground
Item A
Item B
Item C
SecondaryBackground
Item A
Item B
Item C
SecondaryBackground
Item A
Item B
Item C
TertiaryBackground
Item A
Item B
Item C
TertiaryBackground
Item A
Item B
Item C
TertiaryBackground
Item A
Item B
Item C
TertiaryBackground
Item A
Item B
Item C
TertiaryBackground
Item A
Item B
Item C
TertiaryBackground
Item A
Item B
Item C
PrimaryForeground
Item A
Item B
Item C
PrimaryForeground
Item A
Item B
Item C
PrimaryForeground
Item A
Item B
Item C
PrimaryForeground
Item A
Item B
Item C
PrimaryForeground
Item A
Item B
Item C
PrimaryForeground
Item A
Item B
Item C
SecondaryForeground
Item A
Item B
Item C
SecondaryForeground
Item A
Item B
Item C
SecondaryForeground
Item A
Item B
Item C
SecondaryForeground
Item A
Item B
Item C
SecondaryForeground
Item A
Item B
Item C
SecondaryForeground
Item A
Item B
Item C
TertiaryForeground
Item A
Item B
Item C
TertiaryForeground
Item A
Item B
Item C
TertiaryForeground
Item A
Item B
Item C
TertiaryForeground
Item A
Item B
Item C
TertiaryForeground
Item A
Item B
Item C
TertiaryForeground
Item A
Item B
Item C
PrimaryBorder
Item A
Item B
Item C
PrimaryBorder
Item A
Item B
Item C
PrimaryBorder
Item A
Item B
Item C
PrimaryBorder
Item A
Item B
Item C
PrimaryBorder
Item A
Item B
Item C
PrimaryBorder
Item A
Item B
Item C
SecondaryBorder
Item A
Item B
Item C
SecondaryBorder
Item A
Item B
Item C
SecondaryBorder
Item A
Item B
Item C
SecondaryBorder
Item A
Item B
Item C
SecondaryBorder
Item A
Item B
Item C
SecondaryBorder
Item A
Item B
Item C
TertiaryBorder
Item A
Item B
Item C
TertiaryBorder
Item A
Item B
Item C
TertiaryBorder
Item A
Item B
Item C
TertiaryBorder
Item A
Item B
Item C
TertiaryBorder
Item A
Item B
Item C
TertiaryBorder
Item A
Item B
Item C
Size
Show code
Varying sizes for menu buttons tailored to meet diverse design needs, ensuring flexibility and visual hierarchy within your interface.
Small
Item A
Item B
Item C
Small
Item A
Item B
Item C
Small
Item A
Item B
Item C
Medium
Item A
Item B
Item C
Medium
Item A
Item B
Item C
Medium
Item A
Item B
Item C
Large
Item A
Item B
Item C
Large
Item A
Item B
Item C
Large
Item A
Item B
Item C
Sticky
Show code
Experience the Sticky functionality of BitMenuButton, showcasing a button that remains sticky after an item selection. The button displays the selected item and retains its state for continuous user interaction.
Item A
Item B
Item C
Item A
Item B
Item C
Item A
Item B
Item C
Item A
Item B
Item C
Item A
Item B
Item C
Item A
Item B
Item C
Icons
Show code
Present BitMenuButton instances with customized icons, enriching the visual options for representing menu buttons.
IconName
Item A
Item B
Item C
ChevronDownIcon
Item A
Item B
Item C
Style & Class
Show code
Empower customization by overriding default styles and classes, allowing tailored design modifications to suit specific UI requirements.
Text field name and selector of the custom input class.
BitNameSelectorPair properties
Name
Type
Default value
Description
Name
string
Custom class property name.
Selector
Func<TItem, TProp?>?
Custom class property selector.
BitButtonType enum
Name
Value
Description
Button
0
The button is a clickable button.
Submit
1
The button is a submit button (submits form-data).
Reset
2
The button is a reset button (resets the form-data to its initial values).
BitColor enum
Name
Value
Description
Primary
0
Info Primary general color.
Secondary
1
Secondary general color.
Tertiary
2
Tertiary general color.
Info
3
Info general color.
Success
4
Success general color.
Warning
5
Warning general color.
SevereWarning
6
SevereWarning general color.
Error
7
Error general color.
PrimaryBackground
8
Primary background color.
SecondaryBackground
9
Secondary background color.
TertiaryBackground
10
Tertiary background color.
PrimaryForeground
11
Primary foreground color.
SecondaryForeground
12
Secondary foreground color.
TertiaryForeground
13
Tertiary foreground color.
PrimaryBorder
14
Primary border color.
SecondaryBorder
15
Secondary border color.
TertiaryBorder
16
Tertiary border color.
BitSize enum
Name
Value
Description
Small
0
The small size.
Medium
1
The medium size.
Large
2
The large size.
BitVariant enum
Name
Value
Description
Fill
0
Fill styled variant.
Outline
1
Outline styled variant.
Text
2
Text styled variant.
BitVisibility enum
Name
Value
Description
Visible
0
The content of the component is visible.
Hidden
1
The content of the component is hidden, but the space it takes on the page remains (visibility:hidden).
Collapsed
2
The component is hidden (display:none).
BitDir enum
Name
Value
Description
Ltr
0
Ltr (left to right) is to be used for languages that are written from the left to the right (like English).
Rtl
1
Rtl (right to left) is to be used for languages that are written from the right to the left (like Arabic).
Auto
2
Auto lets the user agent decide. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then applies that directionality to the whole element.