Skip to content

Latest commit

 

History

History
549 lines (506 loc) · 20.1 KB

Menu.md

File metadata and controls

549 lines (506 loc) · 20.1 KB

Menu

The Menu component is meant to emulate the asp:Menu control in markup and is defined in the System.Web.UI.WebControls.Menu class

Usage Notes | Web Forms Syntax | Blazor Syntax

Features supported in Blazor

  • Simple static menu, as shown in the ASP.NET example
  • Simple databinding to a Sitemap as shown in the ASP.NET example
  • Selection and Events - MenuItemClick event, SelectedItem, SelectedValue
  • Orientation - Horizontal or Vertical layout
  • Style Sub-Components - StaticMenuItemStyle, DynamicMenuItemStyle, StaticHoverStyle, DynamicHoverStyle, DynamicSelectedStyle, DynamicMenuStyle
  • Navigation Properties - Target, MaximumDynamicDisplayLevels, SkipLinkText
Back to top

Usage Notes

  • Databinding only works with sitemap. Sitemap must be loaded and set as an XML document on DataSource
Back to top

Web Forms Declarative Syntax

<asp:Menu
    AccessKey="string"
    BackColor="color name|#dddddd"
    BorderColor="color name|#dddddd"
    BorderStyle="NotSet|None|Dotted|Dashed|Solid|Double|Groove|Ridge|
        Inset|Outset"
    BorderWidth="size"
    CssClass="string"
    DataSource="string"
    DataSourceID="string"
    DisappearAfter="integer"
    DynamicBottomSeparatorImageUrl="uri"
    DynamicEnableDefaultPopOutImage="True|False"
    DynamicHorizontalOffset="integer"
    DynamicItemFormatString="string"
    DynamicPopOutImageTextFormatString="string"
    DynamicPopOutImageUrl="uri"
    DynamicTopSeparatorImageUrl="uri"
    DynamicVerticalOffset="integer"
    Enabled="True|False"
    EnableTheming="True|False"
    EnableViewState="True|False"
    Font-Bold="True|False"
    Font-Italic="True|False"
    Font-Names="string"
    Font-Overline="True|False"
    Font-Size="string|Smaller|Larger|XX-Small|X-Small|Small|Medium|
        Large|X-Large|XX-Large"
    Font-Strikeout="True|False"
    Font-Underline="True|False"
    ForeColor="color name|#dddddd"
    Height="size"
    ID="string"
    ItemWrap="True|False"
    MaximumDynamicDisplayLevels="integer"
    OnDataBinding="DataBinding event handler"
    OnDataBound="DataBound event handler"
    OnDisposed="Disposed event handler"
    OnInit="Init event handler"
    OnLoad="Load event handler"
    OnMenuItemClick="MenuItemClick event handler"
    OnMenuItemDataBound="MenuItemDataBound event handler"
    OnPreRender="PreRender event handler"
    OnUnload="Unload event handler"
    Orientation="Horizontal|Vertical"
    PathSeparator="string"
    runat="server"
    ScrollDownImageUrl="uri"
    ScrollDownText="string"
    ScrollUpImageUrl="uri"
    ScrollUpText="string"
    SkinID="string"
    SkipLinkText="string"
    StaticBottomSeparatorImageUrl="uri"
    StaticDisplayLevels="integer"
    StaticEnableDefaultPopOutImage="True|False"
    StaticItemFormatString="string"
    StaticPopOutImageTextFormatString="string"
    StaticPopOutImageUrl="uri"
    StaticSubMenuIndent="size"
    StaticTopSeparatorImageUrl="uri"
    Style="string"
    TabIndex="integer"
    Target="string"
    ToolTip="string"
    Visible="True|False"
    Width="size"
>
        <DataBindings>
                <asp:MenuItemBinding
                    DataMember="string"
                    Depth="integer"
                    Enabled="True|False"
                    EnabledField="string"
                    FormatString="string"
                    ImageUrl="uri"
                    ImageUrlField="string"
                    NavigateUrl="uri"
                    NavigateUrlField="string"
                    PopOutImageUrl="uri"
                    PopOutImageUrlField="string"
                    Selectable="True|False"
                    SelectableField="string"
                    SeparatorImageUrl="uri"
                    SeparatorImageUrlField="string"
                    Target="string"
                    TargetField="string"
                    Text="string"
                    TextField="string"
                    ToolTip="string"
                    ToolTipField="string"
                    Value="string"
                    ValueField="string"
                />
        </DataBindings>
        <DynamicHoverStyle />
        <DynamicItemTemplate>
            <!-- child controls -->
        </DynamicItemTemplate>
        <DynamicMenuItemStyle
            BackColor="color name|#dddddd"
            BorderColor="color name|#dddddd"
            BorderStyle="NotSet|None|Dotted|Dashed|Solid|Double|
                Groove|Ridge|Inset|Outset"
            BorderWidth="size"
            CssClass="string"
            Font-Bold="True|False"
            Font-Italic="True|False"
            Font-Names="string"
            Font-Overline="True|False"
            Font-Size="string|Smaller|Larger|XX-Small|X-Small|Small|
                Medium|Large|X-Large|XX-Large"
            Font-Strikeout="True|False"
            Font-Underline="True|False"
            ForeColor="color name|#dddddd"
            Height="size"
            HorizontalPadding="size"
            ItemSpacing="size"
            OnDisposed="Disposed event handler"
            VerticalPadding="size"
            Width="size"
        />
        <DynamicMenuStyle
            BackColor="color name|#dddddd"
            BorderColor="color name|#dddddd"
            BorderStyle="NotSet|None|Dotted|Dashed|Solid|Double|
                Groove|Ridge|Inset|Outset"
            BorderWidth="size"
            CssClass="string"
            Font-Bold="True|False"
            Font-Italic="True|False"
            Font-Names="string"
            Font-Overline="True|False"
            Font-Size="string|Smaller|Larger|XX-Small|X-Small|Small|
                Medium|Large|X-Large|XX-Large"
            Font-Strikeout="True|False"
            Font-Underline="True|False"
            ForeColor="color name|#dddddd"
            Height="size"
            HorizontalPadding="size"
            OnDisposed="Disposed event handler"
            VerticalPadding="size"
            Width="size"
        />
        <DynamicSelectedStyle
            BackColor="color name|#dddddd"
            BorderColor="color name|#dddddd"
            BorderStyle="NotSet|None|Dotted|Dashed|Solid|Double|
                Groove|Ridge|Inset|Outset"
            BorderWidth="size"
            CssClass="string"
            Font-Bold="True|False"
            Font-Italic="True|False"
            Font-Names="string"
            Font-Overline="True|False"
            Font-Size="string|Smaller|Larger|XX-Small|X-Small|Small|
                Medium|Large|X-Large|XX-Large"
            Font-Strikeout="True|False"
            Font-Underline="True|False"
            ForeColor="color name|#dddddd"
            Height="size"
            HorizontalPadding="size"
            ItemSpacing="size"
            OnDisposed="Disposed event handler"
            VerticalPadding="size"
            Width="size"
        />
        <Items />
        <LevelMenuItemStyles>
                <asp:MenuItemStyle
                    BackColor="color name|#dddddd"
                    BorderColor="color name|#dddddd"
                    BorderStyle="NotSet|None|Dotted|Dashed|Solid|
                        Double|Groove|Ridge|Inset|Outset"
                    BorderWidth="size"
                    CssClass="string"
                    Font-Bold="True|False"
                    Font-Italic="True|False"
                    Font-Names="string"
                    Font-Overline="True|False"
                    Font-Size="string|Smaller|Larger|XX-Small|
                        X-Small|Small|Medium|Large|X-Large|XX-Large"
                    Font-Strikeout="True|False"
                    Font-Underline="True|False"
                    ForeColor="color name|#dddddd"
                    Height="size"
                    HorizontalPadding="size"
                    ItemSpacing="size"
                    OnDisposed="Disposed event handler"
                    VerticalPadding="size"
                    Width="size"
                />
        </LevelMenuItemStyles>
        <LevelSelectedStyles>
                <asp:MenuItemStyle
                    BackColor="color name|#dddddd"
                    BorderColor="color name|#dddddd"
                    BorderStyle="NotSet|None|Dotted|Dashed|Solid|
                        Double|Groove|Ridge|Inset|Outset"
                    BorderWidth="size"
                    CssClass="string"
                    Font-Bold="True|False"
                    Font-Italic="True|False"
                    Font-Names="string"
                    Font-Overline="True|False"
                    Font-Size="string|Smaller|Larger|XX-Small|
                        X-Small|Small|Medium|Large|X-Large|XX-Large"
                    Font-Strikeout="True|False"
                    Font-Underline="True|False"
                    ForeColor="color name|#dddddd"
                    Height="size"
                    HorizontalPadding="size"
                    ItemSpacing="size"
                    OnDisposed="Disposed event handler"
                    VerticalPadding="size"
                    Width="size"
                />
        </LevelSelectedStyles>
        <LevelSubMenuStyles>
                <asp:SubMenuStyle
                    BackColor="color name|#dddddd"
                    BorderColor="color name|#dddddd"
                    BorderStyle="NotSet|None|Dotted|Dashed|Solid|
                        Double|Groove|Ridge|Inset|Outset"
                    BorderWidth="size"
                    CssClass="string"
                    Font-Bold="True|False"
                    Font-Italic="True|False"
                    Font-Names="string"
                    Font-Overline="True|False"
                    Font-Size="string|Smaller|Larger|XX-Small|
                        X-Small|Small|Medium|Large|X-Large|XX-Large"
                    Font-Strikeout="True|False"
                    Font-Underline="True|False"
                    ForeColor="color name|#dddddd"
                    Height="size"
                    HorizontalPadding="size"
                    OnDisposed="Disposed event handler"
                    VerticalPadding="size"
                    Width="size"
                />
        </LevelSubMenuStyles>
        <StaticHoverStyle />
        <StaticItemTemplate>
            <!-- child controls -->
        </StaticItemTemplate>
        <StaticMenuItemStyle
            BackColor="color name|#dddddd"
            BorderColor="color name|#dddddd"
            BorderStyle="NotSet|None|Dotted|Dashed|Solid|Double|
                Groove|Ridge|Inset|Outset"
            BorderWidth="size"
            CssClass="string"
            Font-Bold="True|False"
            Font-Italic="True|False"
            Font-Names="string"
            Font-Overline="True|False"
            Font-Size="string|Smaller|Larger|XX-Small|
                X-Small|Small|Medium|Large|X-Large|XX-Large"
            Font-Strikeout="True|False"
            Font-Underline="True|False"
            ForeColor="color name|#dddddd"
            Height="size"
            HorizontalPadding="size"
            ItemSpacing="size"
            OnDisposed="Disposed event handler"
            VerticalPadding="size"
            Width="size"
        />
        <StaticMenuStyle
            BackColor="color name|#dddddd"
            BorderColor="color name|#dddddd"
            BorderStyle="NotSet|None|Dotted|Dashed|Solid|Double|
                Groove|Ridge|Inset|Outset"
            BorderWidth="size"
            CssClass="string"
            Font-Bold="True|False"
            Font-Italic="True|False"
            Font-Names="string"
            Font-Overline="True|False"
            Font-Size="string|Smaller|Larger|XX-Small|X-Small|Small|
                Medium|Large|X-Large|XX-Large"
            Font-Strikeout="True|False"
            Font-Underline="True|False"
            ForeColor="color name|#dddddd"
            Height="size"
            HorizontalPadding="size"
            OnDisposed="Disposed event handler"
            VerticalPadding="size"
            Width="size"
        />
        <StaticSelectedStyle
            BackColor="color name|#dddddd"
            BorderColor="color name|#dddddd"
            BorderStyle="NotSet|None|Dotted|Dashed|Solid|Double|
                Groove|Ridge|Inset|Outset"
            BorderWidth="size"
            CssClass="string"
            Font-Bold="True|False"
            Font-Italic="True|False"
            Font-Names="string"
            Font-Overline="True|False"
            Font-Size="string|Smaller|Larger|XX-Small|X-Small|Small|
                Medium|Large|X-Large|XX-Large"
            Font-Strikeout="True|False"
            Font-Underline="True|False"
            ForeColor="color name|#dddddd"
            Height="size"
            HorizontalPadding="size"
            ItemSpacing="size"
            OnDisposed="Disposed event handler"
            VerticalPadding="size"
            Width="size"
        />
</asp:Menu>
Back to top

Blazor Syntax

<Menu id="NavigationMenu"
      DisappearAfter="2000"
      StaticDisplayLevels="2"
      StaticSubmenuIndent="10"
      orientation="Vertical"
      font-names="Arial"
      target="_blank">

    <StaticMenuItemStyle BackColor="@("LightSteelBlue")"
                         ForeColor="@("Black")" />
    <StaticHoverStyle BackColor="WebColor.LightSkyBlue" />
    <DynamicMenuItemStyle BackColor="WebColor.Black"
                          ForeColor="WebColor.Silver" />
    <DynamicHoverStyle BackColor="WebColor.LightSkyBlue"
                       ForeColor="WebColor.Black" />
    <DynamicSelectedStyle BackColor="WebColor.PapayaWhip"
                          ForeColor="WebColor.SteelBlue" />

    <Items>
        <MenuItem navigateurl="Home.aspx"
                  text="Home"
                  tooltip="Home">
            <MenuItem text="Music" tooltip="Music">
                <MenuItem navigateurl="Classical.aspx"
                          text="Classical"
                          tooltip="Classical" />
                <MenuItem navigateurl="Rock.aspx"
                          text="Rock"
                          tooltip="Rock" />
                <MenuItem navigateurl="Jazz.aspx"
                          text="Jazz"
                          tooltip="Jazz" />
            </MenuItem>
            <MenuItem navigateurl="Movies.aspx" text="Movies" tooltip="Movies">
                <MenuItem navigateurl="Action.aspx"
                          text="Action"
                          tooltip="Action" />
                <MenuItem navigateurl="Drama.aspx"
                          text="Drama"
                          tooltip="Drama" />
                <MenuItem navigateurl="Musical.aspx"
                          text="Musical"
                          tooltip="Musical" />
            </MenuItem>
        </MenuItem>
    </Items>

</Menu>

Examples

Basic Menu with Click Events

<Menu Orientation="Vertical"
      MenuItemClick="HandleMenuClick">
    <Items>
        <MenuItem Text="Home" Value="home" NavigateUrl="/" />
        <MenuItem Text="Products" Value="products">
            <MenuItem Text="Electronics" Value="electronics" NavigateUrl="/electronics" />
            <MenuItem Text="Clothing" Value="clothing" NavigateUrl="/clothing" />
        </MenuItem>
        <MenuItem Text="About" Value="about" NavigateUrl="/about" />
    </Items>
</Menu>

<p>Clicked: @clickedItem</p>

@code {
    private string clickedItem = "";

    private void HandleMenuClick(MenuEventArgs e)
    {
        clickedItem = e.Item.Text;
    }
}

Horizontal Menu

<Menu Orientation="Horizontal"
      SkipLinkText="Skip main navigation"
      Target="_self">
    <Items>
        <MenuItem Text="Home" NavigateUrl="/" />
        <MenuItem Text="Products" NavigateUrl="/products" />
        <MenuItem Text="Services" NavigateUrl="/services" />
        <MenuItem Text="Contact" NavigateUrl="/contact" />
    </Items>
    <StaticMenuItemStyle BackColor="@("SteelBlue")" ForeColor="@("White")" />
    <StaticHoverStyle BackColor="@("LightSteelBlue")" ForeColor="@("Black")" />
</Menu>

Menu with Dynamic Submenus and Styles

<Menu Orientation="Vertical"
      MaximumDynamicDisplayLevels="3"
      StaticDisplayLevels="2">
    <Items>
        <MenuItem Text="File" Value="file">
            <MenuItem Text="New" Value="new" />
            <MenuItem Text="Open" Value="open" />
            <MenuItem Text="Save" Value="save" />
        </MenuItem>
        <MenuItem Text="Edit" Value="edit">
            <MenuItem Text="Cut" Value="cut" />
            <MenuItem Text="Copy" Value="copy" />
            <MenuItem Text="Paste" Value="paste" />
        </MenuItem>
    </Items>
    <StaticMenuItemStyle BackColor="@("LightSteelBlue")" ForeColor="@("Black")" />
    <DynamicMenuItemStyle BackColor="WebColor.Black" ForeColor="WebColor.Silver" />
    <DynamicHoverStyle BackColor="WebColor.LightSkyBlue" ForeColor="WebColor.Black" />
    <DynamicSelectedStyle BackColor="WebColor.PapayaWhip" ForeColor="WebColor.SteelBlue" />
</Menu>

Data Binding with SiteMap

@using System.Xml

<Menu DataSource="@sitemapXml"
      Orientation="Horizontal"
      StaticDisplayLevels="2">
    <DataBindings>
        <MenuItemBinding DataMember="siteMapNode"
                         TextField="title"
                         NavigateUrlField="url" />
    </DataBindings>
</Menu>

@code {
    private XmlDocument sitemapXml;

    protected override void OnInitialized()
    {
        sitemapXml = new XmlDocument();
        sitemapXml.LoadXml(@"
            <siteMap>
                <siteMapNode title='Home' url='/'>
                    <siteMapNode title='Products' url='/products' />
                    <siteMapNode title='About' url='/about' />
                </siteMapNode>
            </siteMap>");
    }
}

Selection and Events Reference

Property/Event Type Default Description
MenuItemClick EventCallback<MenuEventArgs> — Fires when a menu item is clicked.
MenuItemDataBound EventCallback<MenuEventArgs> — Fires when a menu item is data-bound.
SelectedItem MenuItem null Read-only. The currently selected menu item.
SelectedValue string null Read-only. The Value of the selected menu item.

Navigation Properties Reference

Property Type Default Description
Orientation Orientation Vertical Menu layout direction (Horizontal or Vertical).
Target string null Default target frame for navigation links.
MaximumDynamicDisplayLevels int 3 Max depth of dynamically displayed submenus.
SkipLinkText string "Skip Navigation Links" Accessibility skip-link text for screen readers.
StaticDisplayLevels int 1 Number of menu levels displayed statically.

MenuItem Properties Reference

Property Type Description
Text string Display text for the menu item.
Value string Value associated with the menu item.
NavigateUrl string URL to navigate to when clicked.
ToolTip string Tooltip text on hover.
Target string Target frame (falls back to Menu.Target).
ChildContent RenderFragment Nested child MenuItem components.

Style Sub-Components Reference

Component Applied To
<StaticMenuItemStyle> Static (always-visible) menu items
<StaticHoverStyle> Static menu items on hover
<DynamicMenuItemStyle> Dynamically displayed submenu items
<DynamicMenuStyle> Dynamic submenu container
<DynamicHoverStyle> Dynamic menu items on hover
<DynamicSelectedStyle> Selected item in dynamic menus

All style components support BackColor, ForeColor, CssClass, BorderColor, BorderStyle, BorderWidth, Font, Height, and Width properties.

See Also