DropMenu
DropMenu component is a versatile dropdown menu used in Blazor applications. It allows you to create a button that, when clicked, opens a callout or dropdown menu. This can be particularly useful for creating navigation menus, action lists, or any other interactive elements that require a dropdown.
Usage
Basic
This is the content
This is the content
This is the content
Icon
Customizing the drop menu icons.
This is the content
This is the content
Responsive
Rendering the callout in responsive mode on small screens.
This is the content This is the content This is the content
This is the content
This is the content
This is the content
This is the content This is the content This is the content
This is the content
This is the content
This is the content
Template
Here is an example of customizing the drop menu.
This is the content
Events
Utilizing the drop menu OnClick event:
This is the content
External Icons
Use icons from external libraries like FontAwesome, Material Icons, and Bootstrap Icons with the Icon and ChevronDownIcon parameters.
For details on BitIconInfo and its factory methods (BitIconInfo.Css , BitIconInfo.Fa , BitIconInfo.Bi ),
see the BitIconInfo section in the parameters table. Built-in Fluent UI icons are documented at
Iconography.
FontAwesome:
This is the content
This is the content
This is the content
Bootstrap Icons:
This is the content
This is the content
Style & Class
Further customization by overriding default styles and classes, allowing tailored design modifications to suit specific UI requirements.
Component's Style & Class:
This is the content
This is the content
Styles & Classes:
This is the content
This is the content
RTL
Use BitDropMenu in right-to-left (RTL).
این یک محتوای تستی می باشد.
این یک محتوای تستی می باشد این یک محتوای تستی می باشد این یک محتوای تستی می باشد
این یک محتوای تستی می باشد
این یک محتوای تستی می باشد
این یک محتوای تستی می باشد این یک محتوای تستی می باشد این یک محتوای تستی می باشد
این یک محتوای تستی می باشد
این یک محتوای تستی می باشد
API
BitDropMenu parameters
Name |
Type |
Default value |
Description |
|---|---|---|---|
| Body | RenderFragment? | null | Alias of the ChildContent. |
| ChevronDownIcon | BitIconInfo? | null | The icon for the chevron down part of the drop menu using custom CSS classes for external icon libraries. Takes precedence over ChevronDownIconName when both are set. |
| ChevronDownIconName | string? | null | The icon name for the chevron down part of the drop menu from the built-in Fluent UI icons. For external icon libraries, use ChevronDownIcon instead. |
| ChildContent | RenderFragment? | null | The content of the callout of the drop menu. |
| Classes | BitDropMenuClassStyles? | null | Custom CSS classes for different parts of the drop menu. |
| Icon | BitIconInfo? | null | The icon to display inside the header using custom CSS classes for external icon libraries. Takes precedence over IconName when both are set. |
| IconName | string? | null | The name of the icon to display inside the header from the built-in Fluent UI icons. For external icon libraries, use Icon instead. |
| IsOpen | bool | false | Determines the opening state of the callout of the drop menu. |
| OnClick | EventCallback | The callback is called when the drop menu is clicked. | |
| OnDismiss | EventCallback | The callback is called when the drop menu is dismissed. | |
| ScrollContainerId | string? | The id of the element which needs to be scrollable in the content of the callout of the drop menu. | |
| Responsive | bool | false | Renders the drop menu in responsive mode on small screens. |
| Styles | BitDropMenuClassStyles? | null | Custom CSS styles for different parts of the drop menu. |
| Template | RenderFragment? | null | The custom content to render inside the header of the drop menu. |
| Text | string? | null | The text to show inside the header of the drop menu. |
| Transparent | bool | false | Makes the background of the header of the drop menu transparent. |
BitComponentBase parameters
Name |
Type |
Default value |
Description |
|---|---|---|---|
| AriaLabel | string? | null | Gets or sets the accessible label for the component, used by assistive technologies. |
| Class | string? | null | Gets or sets the CSS class name(s) to apply to the rendered element. |
| Dir | BitDir? | null | Gets or sets the text directionality for the component's content. |
| HtmlAttributes | Dictionary<string, object> | new Dictionary<string, object>() | Captures additional HTML attributes to be applied to the rendered element, in addition to the component's parameters. |
| Id | string? | null | Gets or sets the unique identifier for the component's root element. |
| IsEnabled | bool | true | Gets or sets a value indicating whether the component is enabled and can respond to user interaction. |
| Style | string? | null | Gets or sets the CSS style string to apply to the rendered element. |
| TabIndex | string? | null | Gets or sets the tab order index for the component when navigating with the keyboard. |
| Visibility | BitVisibility | BitVisibility.Visible | Gets or sets the visibility state (visible, hidden, or collapsed) of the component. |
BitComponentBase public members
Name |
Type |
Default value |
Description |
|---|---|---|---|
| UniqueId | Guid | Guid.NewGuid() | Gets the readonly unique identifier for the component's root element, assigned when the component instance is constructed. |
| RootElement | ElementReference | Gets the reference to the root HTML element associated with this component. |
BitDropMenuClassStyles properties
Name |
Type |
Default value |
Description |
|---|---|---|---|
| Root | string? | null | Custom CSS classes/styles for the root element of the BitDropMenu. |
| Opened | string? | null | Custom CSS classes/styles for the opened callout state of the BitDropMenu. |
| Button | string? | null | Custom CSS classes/styles for the button of the BitDropMenu. |
| Icon | string? | null | Custom CSS classes/styles for the icon of the BitDropMenu. |
| Text | string? | null | Custom CSS classes/styles for the text of the BitDropMenu. |
| ChevronDown | string? | null | Custom CSS classes/styles for the chevron-down icon of the BitDropMenu. |
| Overlay | string? | null | Custom CSS classes/styles for the overlay of the BitDropMenu. |
| Callout | string? | null | Custom CSS classes/styles for the callout of the BitDropMenu. |
BitIconInfo properties
Name |
Type |
Default value |
Description |
|---|---|---|---|
| Name | string? | null | Gets or sets the name of the icon. |
| BaseClass | string? | null | Gets or sets the base CSS class for the icon. For built-in Fluent UI icons, this defaults to "bit-icon". For external icon libraries like FontAwesome, you might set this to "fa" or leave empty. |
| Prefix | string? | null | Gets or sets the CSS class prefix used before the icon name. For built-in Fluent UI icons, this defaults to "bit-icon--". For external icon libraries, you might set this to "fa-" or leave empty. |
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. |
Feedback
You can give us your feedback through our GitHub repo by filing a new Issue or starting a new Discussion.
Or you can review / edit this page on GitHub.
Or you can review / edit this component on GitHub.
- On this page