Admin Console

Offcanvas

Lorem
Base UI
Offcanvas

OFFCANVAS

You can use a link with the href attribute, or a button with the data-bs-target attribute. In both cases, the data-bs-toggle="offcanvas" is required.

Preview
Code

Link with href

Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.

				
				Link with href
				
				
				
				
					
						Offcanvas
						
					
					
					
						
						  Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
						
						
							
							
								Action
								Another action
								Something else here

OFFCANVAS BACKDROP

Scrolling the element is disabled when an offcanvas and its backdrop are visible. Use the data-bs-scroll attribute to toggle scrolling and data-bs-backdrop to toggle the backdrop.

Preview
Code

Try scrolling the rest of the page to see this option in action.

Nullam Facilisis Elit Velit, In Rutrum Felis Iaculis A. In Hac Habitasse Platea Dictumst. Cras Mi Libero, Iaculis Ac Diam Eget, Tristique Vestibulum Sem. Pellentesque Lobortis Vel Enim Non Tincidunt. Nam Pharetra Pellentesque Viverra.

Try scrolling the rest of the page to see this option in action.

				
				
				
				
				
					
						Colored with scrolling
						
					
					
					
						Try scrolling the rest of the page to see this option in action.
					
				
				
					
						Offcanvas with backdrop
						
					
					
						Nullam Facilisis Elit Velit, In Rutrum Felis Iaculis A. In Hac Habitasse Platea Dictumst. Cras Mi Libero, Iaculis Ac Diam Eget, Tristique Vestibulum Sem. Pellentesque Lobortis Vel Enim Non Tincidunt. Nam Pharetra Pellentesque Viverra.
					
				
				
					
						Backdrop with scrolling
						
					
					
						Try scrolling the rest of the page to see this option in action.

OFFCANVAS PLACEMENT

Try the right and bottom examples out below.

Preview
Code

Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.

List

Nemo enim ipsam voluptatem quia aspernatur
Neque porro quisquam est, qui dolorem
Quis autem vel eum iure qui in ea

Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.

List

Nemo enim ipsam voluptatem quia aspernatur
Neque porro quisquam est, qui dolorem
Quis autem vel eum iure qui in ea

Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.

List

Nemo enim ipsam voluptatem quia aspernatur
Neque porro quisquam est, qui dolorem
Quis autem vel eum iure qui in ea

Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.

List

Nemo enim ipsam voluptatem quia aspernatur
Neque porro quisquam est, qui dolorem
Quis autem vel eum iure qui in ea

Offcanvas Top

Some text as placeholder. In real life you can have the elements you have chosen. Like, text,
images, lists, etc.

List

Nemo enim ipsam voluptatem quia aspernatur
Neque porro quisquam est, qui dolorem
Quis autem vel eum iure qui in ea

Offcanvas right

Some text as placeholder. In real life you can have the elements you have chosen. Like, text,
images, lists, etc.

List

Nemo enim ipsam voluptatem quia aspernatur
Neque porro quisquam est, qui dolorem
Quis autem vel eum iure qui in ea

Offcanvas bottom

Some text as placeholder. In real life you can have the elements you have chosen. Like, text,
images, lists, etc.

List

Nemo enim ipsam voluptatem quia aspernatur
Neque porro quisquam est, qui dolorem
Quis autem vel eum iure qui in ea

Offcanvas Left

Some text as placeholder. In real life you can have the elements you have chosen. Like, text,
images, lists, etc.

List

Nemo enim ipsam voluptatem quia aspernatur
Neque porro quisquam est, qui dolorem
Quis autem vel eum iure qui in ea