Layout Modes

Updated on Mar 24, 2026

The SegmentedControl supports two layout modes that control how segment widths are calculated and how the component fits within its container.

Compact Mode

Compact is the default layout mode. In this mode:

• Each segment's width is determined by its content (label, icon, and padding).
• Segments can have unequal widths.
• The component's total width is the combined width of all its segments.
• The component does not stretch to fill its container.

Razor

@using Kendo.Mvc.UI

@(Html.Kendo().SegmentedControl()
    .Name("segmentedControl")
    .LayoutMode(SegmentedButtonLayoutMode.Compact)
    .Items(items =>
    {
        items.Add().Text("Day").Value("day");
        items.Add().Text("Week").Value("week");
        items.Add().Text("Month").Value("month");
    })
    .SelectedValue("day")
)

Stretch Mode

In Stretch mode:

• The component expands to fill the full width of its container.
• All segments are equal width, regardless of label length.
• Each segment's width is calculated as the container width divided by the number of segments.

Razor

@using Kendo.Mvc.UI

@(Html.Kendo().SegmentedControl()
    .Name("segmentedControl")
    .LayoutMode(SegmentedButtonLayoutMode.Stretch)
    .Items(items =>
    {
        items.Add().Text("Day").Value("day");
        items.Add().Text("Week").Value("week");
        items.Add().Text("Month").Value("month");
    })
    .SelectedValue("day")
)

See Also

• SegmentedControl Overview (Demo)
• SegmentedControl Server-Side API for ASP.NET MVC
• SegmentedControl Client-Side API