# Sidnav width expanded / collapsed left margin

**URL:** <https://forum.servoy.com/t/sidnav-width-expanded-collapsed-left-margin/24194>\
**Category:** Questions\
**Created:** [January 14, 2026, 10:16am UTC](https://forum.servoy.com/t/sidnav-width-expanded-collapsed-left-margin/24194 "2026-01-14T10:16:06Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![hovw](https://avatars.discourse-cdn.com/v4/letter/h/d9b06d/32.png) [@hovw](https://forum.servoy.com/u/hovw)\
**Post date:** [January 14, 2026, 10:16am UTC](https://forum.servoy.com/t/sidnav-width-expanded-collapsed-left-margin/24194/1 "2026-01-14T10:16:06Z")

</div>

It is possible to set the with of d sidenav  
elements.sidenav.sidenavWidth = 150;

But how to set the collapsed width and left margin

---

<div class="post-metadata">

**Author:** ![aijazalee889](https://yyz2.discourse-cdn.com/flex010/user_avatar/forum.servoy.com/aijazalee889/32/5129_2.png) [@aijazalee889](https://forum.servoy.com/u/aijazalee889)\
**Post date:** [January 14, 2026, 4:27pm UTC](https://forum.servoy.com/t/sidnav-width-expanded-collapsed-left-margin/24194/2 "2026-01-14T16:27:48Z")

</div>

Hi,

Based on my knowledge and exploration, there is no built-in property or style class in Servoy to handle sidenav collapse width. However, the left margin can be adjusted by applying a custom style class to the component.

elements.sidenav\_2.addStyleClass(‘custom-margin’);

.custom-margin {  
margin-left: 20px !important;  
}

Thanks  
Aijaz Ali

---

<div class="post-metadata">

**Author:** ![paronne](https://yyz2.discourse-cdn.com/flex010/user_avatar/forum.servoy.com/paronne/32/5096_2.png) [@paronne](https://forum.servoy.com/u/paronne)\
**Post date:** [January 15, 2026, 9:53am UTC](https://forum.servoy.com/t/sidnav-width-expanded-collapsed-left-margin/24194/3 "2026-01-15T09:53:02Z")

</div>

Hi,

the width of the collapsed sidenav is indeed set with style. The default style in TiNG is the following ( see below ). So you can override that with your desired with value in your solution’s stylesheet

```auto
.nav-collapse-menu.svy-slide-out:not(.svy-hover) {
    width: 50px !important; /* use important to override inline width */
}

/* end width when closing */
.nav-collapse-menu.svy-slide-out.svy-slide-out-add,
.nav-collapse-menu.svy-slide-out.svy-hover-remove {
	width: 50px !important;
}

/* start width when opening (hover) */
.nav-collapse-menu.svy-slide-out.svy-hover-add {
	width: 50px !important;
}

/* start width when opening (open) */
.nav-collapse-menu.svy-slide-out.svy-slide-out-remove {
	width: 50px;
}

```

---

<div class="post-metadata">

**Author:** ![hovw](https://avatars.discourse-cdn.com/v4/letter/h/d9b06d/32.png) [@hovw](https://forum.servoy.com/u/hovw)\
**Post date:** [January 16, 2026, 9:02am UTC](https://forum.servoy.com/t/sidnav-width-expanded-collapsed-left-margin/24194/4 "2026-01-16T09:02:11Z")

</div>

Full css sample sidenav fixed wide  
As icons from symbols font, as text in Affinity Designer. Select Layer and text to curves.  
Select all curves, save as png. Drop png in media folder.

function initNavigationForm() {

```
// init the sidenav menu
var menuItems = loadMenuItems();
elements.sidenav.setRootMenuItems(menuItems);
elements.sidenav.sidenavWidth = 70;

```

}

function loadMenuItems() {  
/\*\* @typetypetypetype {CustomType\<servoyextra-sidenav.MenuItem\>} _/  
var menuItem;  
var menuIte_@type_s = [_@type\*;\*@type\*/\*\* @type {CustomType\<servoyextra-sidenav.MenuItem\>} \*/  
var menuSubItem;  
var menuSubItems = ;

```auto
menuItem = new Object();
menuItem.id = "agenda_main";
menuItem.text = 'Agenda T'
menuItem.iconStyleClass = 'hocu-snav-agenda-icon';
menuItem.styleClass = 'hocu-snav-bg'

menuItems.push(menuItem);

menuItem = new Object();
menuItem.id = "d_demoCalendar";
menuItem.text = 'Agenda D';
menuItem.iconStyleClass = 'hocu-snav-agenda-icon';
menuItem.styleClass = 'hocu-snav-bg'
menuItem.tooltip = 'Agenda d'
menuItems.push(menuItem);
return menuItems;

```

}

part ng2.less  
.nav-collapse-menu.svy-slide-out:not(.svy-hover) {

width: 70px !important; /\* use important to override inline width \*/

}

/\* end width when closing \*/

.nav-collapse-menu.svy-slide-out.svy-slide-out-add,

.nav-collapse-menu.svy-slide-out.svy-hover-remove {

width: 70px !important;

}

/\* start width when opening (hover) \*/

.nav-collapse-menu.svy-slide-out.svy-hover-add {

width: 70px !important;

}

/\* start width when opening (open) \*/

.nav-collapse-menu.svy-slide-out.svy-slide-out-remove {

width: 70px;

}

.hocu-snav-bg{

max-width: 100px;

background: #e7e7e7;

font-weight: 500;

font-size: 10px;

color: #555555;

line-height: 12px;

padding-left: 0px;

height: 64px;

text-align: center;

padding-right: 0px

}

.hocu-snav-sub-bg{

max-width: 100px;

background: #e7e7e7;

font-weight: 500;

font-size: 10px;

color: #555555;

line-height: 12px;

padding-left: 0px;

height: 42px;

text-align: left;

padding-right: 0px

}

.hocu-snav-agenda-icon{

content: url(‘./iortho\_agenda\_wit.png’);

background: #00A0DB;

max-width: 42px;

border: 0px;

border-style: solid;

border-radius: 4px

}  
 ![Scherm­afbeelding 2026-01-16 om 09.59.18](https://canada1.discourse-cdn.com/flex010/uploads/servoy/original/2X/b/bd5c3aeb922b0dc373681527f4de6812bb062120.png)

Thanks Aijaz Ali and Paolo Aronne