ComponentsLayout and structure

Hidden and breakpoints

MudHidden renders its content only at chosen screen sizes, and MudBreakpointProvider shares one breakpoint listener with everything inside it. Use them when content must change, not just rearrange, between phone and desktop.

MudHidden
MudBreakpointProvider
MudBlazor reference ↗
Page source ↗

The current breakpoint

MudBreakpointProvider raises OnBreakpointChanged whenever the window crosses a breakpoint. Resize the window and the highlighted size follows.

Xs · from 0 px

Sm · from 600 px

Md · from 960 px

Lg · from 1280 px

Xl · from 1920 px

Xxl · from 2560 px

Current breakpoint: measuring…

Every Breakpoint value

MudHidden hides its content at the given breakpoint; Invert shows it only there. Each row pairs the two, so exactly one of them renders for the current window.

MudHidden: Breakpoint, with and without Invert
Breakpoint	Matches this window?
Breakpoint.Xs	No: plain MudHidden shows this
Breakpoint.Sm	No: plain MudHidden shows this
Breakpoint.Md	No: plain MudHidden shows this
Breakpoint.Lg	No: plain MudHidden shows this
Breakpoint.Xl	No: plain MudHidden shows this
Breakpoint.Xxl	No: plain MudHidden shows this
Breakpoint.SmAndDown	No: plain MudHidden shows this
Breakpoint.MdAndDown	No: plain MudHidden shows this
Breakpoint.LgAndDown	No: plain MudHidden shows this
Breakpoint.XlAndDown	No: plain MudHidden shows this
Breakpoint.SmAndUp	Yes: Invert shows this
Breakpoint.MdAndUp	Yes: Invert shows this
Breakpoint.LgAndUp	Yes: Invert shows this
Breakpoint.XlAndUp	Yes: Invert shows this
Breakpoint.Always	Yes: Invert shows this

Labels on wide screens, icons on narrow

A realistic use: full buttons from md upwards, compact icon buttons with accessible names below it.