# Expand Direction

Blazor Edition provides a set of native UI controls built for Blazor such as FlexGrid, Chart, ListView, and input controls including AutoComplete and ComboBox.

## Content



The Expander control allows you to change the direction in which you want it to expand. You can set the expansion direction for the Expander control using **ExpandDirection** property of the **C1Expander** class. The **ExpandDirection** property accepts values from the **ExpandDirection** enumeration that specifies the direction in which the Expander control expands. It allows you to expand the Expander control in up, down, right or left direction.

By default, the control expands downwards as the **ExpandDirection** property is set to Down. However, when you change the expansion direction of the expander, it also changes the header's orientation to the content area of the control as shown in the image below.

![Blazor Expander control expanded in right direction](https://cdn.mescius.io/document-site-files/images/f5b600ba-f1a7-4f89-a20c-aa6c0c35880d/images/expanderexpanddirection.gif)

The following code illustrates the use of ExpandDirection property to expand the Expander control in left direction.

```razor
<C1Expander Header="@("Click")" ExpandDirection="@ExpandDirection.Left" HeaderStyle="@("background-color: rgba(0,128,0,0.2);height:334px;")" Style="@("overflow:hidden;width:25%;box-shadow:0px 5px 5px rgba(0,0,0,0.2)")">
    <C1Calendar FirstDayOfWeek="@DayOfWeek.Monday"></C1Calendar>
</C1Expander>
```