New to Telerik UI for Blazor? Download Free 30-day trial

DockManager - Keyboard Navigation

Explorer

    The Dashboard component provides an overview of the application's most important metrics and activity. It aggregates data from multiple services and renders them through a combination of charts, grids, and summary cards.

    Components rendered here depend on the IDashboardDataService interface. Injecting a mock implementation during testing ensures isolation from the production database and allows deterministic assertions on the output.

    State management is handled through a scoped DashboardStateService, which exposes reactive properties and supports undo/redo of layout changes made by the user at runtime.

    Terminal
    $ dotnet build
    Determining projects to restore...
    Restored TelerikBlazorDemos (0.4s)
    Build succeeded — 0 errors, 0 warnings
    $ dotnet run --project TelerikBlazorDemos
    info: Application started.
    info: Listening on http://localhost:5000
    warn: AuthService — token expiry within 5 min
    info: DataService cache warmed (312 entries)
    ✓ Dashboard rendered in 38 ms
    Name Dashboard
    Type Page
    Route /dashboard
    Width 100%
    Height auto
    Padding 16px
    Visible true
    Enabled true
    Loading false
    • Keyboard-navigation.razor
    Loading the demo source code...please wait.
    Style in ThemeBuilder
    • Custom SASS variables
    • Atomic customizations
    • Sharing projects
    Start Theming

    Focus

    • Alt + W focuses the first component in the example

    Managing the Focus

    The DockManager component provides advanced keyboard navigation to manage the active panes, docking, and focusing of content. These keyboard shortcuts allow users to interact with the DockManager efficiently without requiring a mouse.

    DockManager Navigation

    • Alt (Option on Mac) + Up Arrow Maximizes the active pane.
    • Alt (Option on Mac) + Down Arrow Minimizes the active pane.
    • Esc Closes the active pane.

    Description

    Keyboard navigation provides all web and app users with a fast keyboard-only navigation capability and is also part of the web accessibility features - it enables users with disabilities to fully control their website or app access through the keyboard.

    By default, users can only navigate to links, buttons, and form controls with a keyboard. The navigation order in which interactive items receive keyboard focus has to be logical and intuitive. Generally, keyboard navigation logic needs to follow the visual horizontal and vertical flow of the page, for example, left to right and top to bottom, header first followed by the main and then the page navigation.

    The keyboard navigation of the Telerik UI for Blazor DockManager is always enabled, as demonstrated in this demo.

    This Blazor DockManager Keyboard Navigation example is part of a unique collection of hundreds of Blazor demos, with which you can see all Telerik UI for Blazor components and their features in action. View the source code of the demos from the library or directly adapt, and edit them and their theme appearance in Telerik REPL for Blazor or ThemeBuilder.

    Support & Learning Resources

    An error has occurred. This application may no longer respond until reloaded.