Sometimes, you might want an option to automatically select and focus the first item in the menu when it opens. This behavior can be achieved in the menu control by setting the AutoSelectOnFocus property to true.

The AutoSelectOnFocus property sets a value that determines whether the first enabled item in the menu is automatically focused/selected in the dropdown. This provides appropriate navigation when accessibility tools are used. By default, the value of the AutoSelectOnFocus property is set to false.

The following image showcases the first item in the menu as selected and in focus.

The following code showcases the use of the AutoSelectOnFocus property. This example uses the data and the code used in Quick Start sample.

View

<div>
    @(Html.C1().Menu().Header("File")
        .AutoSelectOnFocus(true)
        .Width(300)
        .MenuItems(items => items
            .Add(item => item.Header("New"))
            .Add(item => item.Header("Open"))
            .Add(item => item.Header("Save"))
            .Add(item => item.IsSeparator(true))
            .Add(item => item.Header("Exit"))
        )
    )
</div>