Direction
Sets the writing direction for its content, so the library's layout mirrors for a right-to-left language such as Arabic or Hebrew. Renders no box of its own, writes a dir attribute, and cascades a DirectionContext for the decisions CSS cannot make.
Try it on this site
BbDirectionProvider. Turn it on and every page mirrors — including the demos below.
Your choice is remembered.
Mirroring a Layout
margin-inline-start rather than margin-left), so the dir attribute is enough on its own.
There is no second stylesheet and no runtime branching. Toggle the buttons and watch the row flip.
Reading the Direction in Your Own Component
DirectionContext and call DirectionContext.Resolve, which returns the
culture's direction when there is no provider — so it never needs a null check.
Where to Put It
Wrap the application's layout in it, including BbPortalHost. An overlay that renders through the
portal host needs the direction too.
An overlay whose host sits outside the provider still gets the direction: the floating element copies it from its trigger when it opens, through the same path that already carried a local theme across the portal boundary.
TextDirection.Auto, the default, follows CultureInfo.CurrentCulture. That is the behaviour every
component already had, so adding the provider changes nothing until an application asks for a direction. A component used with
no provider at all still follows the culture.
What Changed Inside the Components
Arrow keys follow the reading direction in BbTabsList, BbToggleGroup,
BbRadioGroup and the tree: → moves the way the items
are drawn rather than the way the key points. ↑ and
↓ never flip. In the tree it is
← that opens a node. Menus were already direction-aware.
Alignment needed no change. PopoverAlign.Start and PopoverAlign.End already resolved
against the writing direction.
BbAttachmentActions positioned its action row on a physical edge; it now follows the reading direction.
What Is Deliberately Not Mirrored
A parameter that names a physical side keeps its promise. These are unchanged in a right-to-left layout, because
the name says which side it means: SheetSide, DrawerDirection, SidebarSide,
ToastPosition, BadgeDotPosition, and the PopoverSide an overlay reports.
Components that place content with pixel or percentage maths measured from the left edge stay left-to-right.
Mirroring the paint without the maths behind it reads worse than not mirroring at all:
BbSlider, BbRangeSlider, BbCarousel, BbScheduler, the
BbEventCalendar day bands, BbDashboardGrid, BbDock and BbResizable.