Questions tagged [sidenav]
122 questions
14
votes
2 answers
7
votes
5 answers
Sidenav with affix - links do not wrap to next line
If I have the following, the link text wraps to the next line beautifuly:

Robben_Ford_Fan_boy
- 8,494
- 11
- 64
- 85
6
votes
1 answer
Force Angular Material sidenav container with toolbar to fill height
I can't get the Angular Material sidenav container to fill the height of the screen. The sidenav as well as the sidenav content is just as high as it needs to be to fit its content.
I want to have it's height to fill the screen.
HTML of Nav…

luhu
- 361
- 3
- 12
5
votes
4 answers
An angular-material-multilevel-menu for Angular 6?
I have tried to achieve a multilevel sidenav and I found this that meets my requirements:
angular-material-multilevel-menu
Demo - Note the accordion type
Unfortunately this is created for AngularJS (1.0?), which seems to not work in Angular 6.
My…

sibert
- 1,968
- 8
- 33
- 57
5
votes
5 answers
How to use sideNav of materialize css with react?
I'm developing an app with React, I want to use the sidenav component http://materializecss.com/side-nav.html
The problem is that I'm getting this error:
Sidebar.js:8 Uncaught TypeError: __WEBPACK_IMPORTED_MODULE_2_jquery___default(...)(...).sideNav…

sirandy
- 1,834
- 5
- 27
- 32
4
votes
2 answers
Can't bind to 'mode' since it isn't a known property of 'mat-sidenav'
Hi I don't know what to do with this
Here's the error
compiler.js:2430 Uncaught Error: Template parse errors:
Can't bind to 'mode' since it isn't a known property of 'mat-sidenav'.
1. If 'mat-sidenav' is an Angular component and it has 'mode' input,…

Mark
- 293
- 1
- 11
- 25
3
votes
2 answers
Angular : open sidenav with another component , ERROR TypeError: Cannot read property 'toggle' of undefined
I can not open a sidenav from another component. The error is in the image at the end of this question. I would like to use this style of sidenav in my code:
https://stackblitz.com/angular/lronayrmlye?file=src%2Fapp%2Fsidenav-autosize-example.ts
but…

jojupiter
- 68
- 1
- 11
3
votes
1 answer
Angular material sidenav hover
I am trying to build an Angular Sidebar. Currently, it is having a toggle effect which means, when we click it, it will collapse. If it is collapsed, it will expand. Now I am trying to expand only the item which gets hover. I need some help with…

Leela Vathi
- 71
- 1
- 2
- 5
3
votes
3 answers
My sidenav does not push the content, it overcomes it
I'm trying to make the Side Material Sidenav push the content when I open the bar and obviously when it closes; the elements that were pushed back into place. Currently what it does is open up over the content
Here's my…

S. A
- 493
- 2
- 6
- 14
3
votes
1 answer
angular-5 material sidenav in a separate component to reuse in other components
I am new in angular material following material.angular.io
I want to have sidnav on multiple pages
the code they provide for sidenav contains sidenav as well as well as content of page, as below

usp
- 31
- 1
- 3
3
votes
1 answer
Side Nav Bar Open/Collapse and Container Resize
So I'm using bootstrap to build a dashboard with a side nav bar. When the navbar is open, the container content is pushed to the right and out of the screen. I want the whole container to be resized to fit the screen. So whether navbar is open or…

Muaath Ali
- 67
- 1
- 9
2
votes
1 answer
How do I fix my SideBar to open and close?
I am trying to get a SideNav to open and close affter pressing a button. However, I can only get it to close. When I pass the sideNave() function to button.addEventListener("click", ... ) nothing happens. I would appriciate your help a lot! My code…

Carlos Garcia prieto
- 21
- 1
2
votes
4 answers
Giving overflow value is hiding the nested sidenav
I have created sidenav in the below stackblitz
I have given overflow-x: visible and overflow-y: auto/hidden so that, I should see vertical scrolling if there are more menu items.
But this breaks, my nested sidemenu options which is seen under div…

Shoaib Chikate
- 8,665
- 12
- 47
- 70
2
votes
0 answers
How to stop scrolling in mat-drawer-content, when mat-sidenav is opened
Am using angular material version 8.x. in my application. Have used mat-sidenav-container. When I open the menu, the mat-drawer-content is also getting scroll-able and upon scrolling it to bottom or top, the side menu(mat-sidenav) is getting close.…

user3036042
- 95
- 1
- 4
2
votes
1 answer
Angular Material: How to toggle sidenav when the trigger is in a different component
how do I toggle the sidenav from another component?
When the button/trigger is in the same .html file as the sidenav, it work just fine, but if I generate a new component, in my case I named them "sidebar-left" and "topbar," it don't work.
What I…

JayP
- 43
- 6