New to Kendo UI for jQuery? Start a free 30-day trial
Layout Modes
Updated on Mar 24, 2026
The SegmentedControl supports two layout modes that determine how segment widths are calculated and how the component interacts with 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 total width of the component equals the combined widths of all segments.
- The component does not stretch to fill its container.
html
<div id="segmentedControl"></div>
<script>
$("#segmentedControl").kendoSegmentedControl({
layoutMode: "compact",
items: [
{ text: "Day", value: "day" },
{ text: "Week", value: "week" },
{ text: "Month", value: "month" }
],
selectedValue: "day"
});
</script>Stretch Mode
In stretch mode:
- The component expands to fill the full width of its container.
- All segments are equal width, regardless of their label length.
- Each segment's width is calculated as the container width divided by the number of segments.
html
<div id="segmentedControl"></div>
<script>
$("#segmentedControl").kendoSegmentedControl({
layoutMode: "stretch",
items: [
{ text: "Day", value: "day" },
{ text: "Week", value: "week" },
{ text: "Month", value: "month" }
],
selectedValue: "day"
});
</script>