Offcanvas menu for Bootstrap

-
Bootstrap is one of the most widely used front-end development frameworks, offering an extensive range of pre-built components and features for creating responsive websites. One of the features of Bootstrap is the off-canvas menu, which is a navigation menu that slides in from the side of the screen, taking over part of the viewport. This type of menu is especially useful for mobile devices, where screen real estate is limited. In this article, we will discuss how to create an off-canvas menu for Bootstrap.

Step 1: Import Bootstrap CSS

The quickest and easiest way to use Bootstrap is to import it from the official Bootstrap CDN site. At a minimum you'll want to import the CSS and Javascript files. Below is an example how to import Bootstrap v5.2.3 into an HTML file.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous"></script>

Step 2: Create the HTML structure

To create an off-canvas menu in Bootstrap, we will first need to create the HTML structure for the menu. We will use the following basic structure:

<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvas">
	<div class="offcanvas-header">
		<h5 class="offcanvas-title" id="offcanvasLabel">Offcanvas Menu Title</h5>
		<button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
	</div>
	<div class="offcanvas-body">
		Add the content for the offcanvas menu. You can add text, buttons, links and more! 
	</div>
</div>

In this HTML we have a div element with the offcanvas and offcanvas-start classes. These 2 classes are defined by Bootstrap CSS and contain the styles required to show/hide the off canvas menu. Within this HTML you'll find a place for the menu title (offcanvas-title) and body (offcanvas-body). You can place just about anything you want within the body section. 

Step 3: Add a Trigger

With the structure of the menu complete, you need a way to trigger to show and/or hide the offcanvas menu. You can use different HTML elements and they all work the same way. Again, we're going to leverage Bootstrap's CSS and Javascript.

There are a couple of things to pay attention to in the HTML. The anchor element href attribute is set to "#offcanvas", which is the same as the id attribute in the off-canvas menu HTML above. Additionally, the anchor tag's data-bs-toggle attribute is set to "offcanvas", which is used by Bootstrap's javascript to toggle showing or hiding the off-canvas menu. 
<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvas" role="button">
  Open Off-canvas Menu
</a>

Conclusion

In this article, I've shown you how to use Bootstrap to set up an off-canvas menu and how to show and hide it. Off-canvas menus are a nice way to clean up your UI when you need the real estate for other content, especially when content is on smaller mobile devices. They are incredibly easy to use and very versatile to show all types of content. 

Comments

Post a Comment

Popular posts from this blog

Max Upload File Size in Spring Framework

-
  Spring framework comes preconfigured with default upload file size and max request size. You can modify the sizes with application settings. Settings max-file-size  specifies the maximum size permitted for uploaded files. The default is 1MB max-request-size  specifies the maximum size allowed for multipart/form-data requests. The default is 10MB. Error exceeding max file size Java with Spring 6 will throw a  MaxUploadSizeExceededException  exception when the max size is exceeded. threw exception [ Request processing failed: org . springframework . web . multipart . MaxUploadSizeExceededException : Maximum upload size exceeded ] with root cause org . apache . tomcat . util . http . fileupload . impl . FileSizeLimitExceededException : The field image exceeds its maximum permitted size of 1048576 bytes . at org . apache . tomcat . util . http . fileupload . impl . FileItemStreamImpl $ 1 . raiseError ( FileItemStreamImpl . java : 117 ) ~[ tomcat - embed - co
Read more

Use Java Enums with JPA

-
Java Persistence API (JPA) is a widely used standard for object-relational mapping (ORM) in Java applications. One of the common challenges when working with JPA is mapping database columns to Java enums. This can be especially challenging if the database column is not a string, such as when using an integer or a byte as the database column type. In this article, we will explore how to use Java enums with JPA. Mapping Java enums to database columns Before we dive into the details of how to use Java enums with JPA, let's first discuss how JPA maps Java enums to database columns. JPA provides two basic ways to map Java enums to database columns: Ordinal-based mapping : This maps the enum's ordinal value (the position of each enum value in the enum declaration) to the database column. For example, if we have an enum named Status with values ACTIVE, INACTIVE, and SUSPENDED, ACTIVE will have an ordinal value of 0, INACTIVE will have an ordinal value of 1, and so on. Name-based mappi
Read more

Spring Security part 5 - Freemarker Security Tags

-
  In this series of Spring Security articles, I’ve walked you through the configuration, authentication and authorization cycles. In this final article, I’m going to show you how to set up security tags in Free Marker. The concepts I’m going to show you work equally well in JSP, Thymeleaf and Tiles. Other Articles Architecture -  Spring Security Architecture Part 1 -  Security configuration Part 2 -  How to handle UserDetails gracefully Part 3 -  UserDetails for OAuth authentication Part 4 -  Handling GrantedAuthorities with custom roles/permissions Part 5 -  Security tags for Freemarker If you’re new to Spring, you should take a look at  Getting started with Spring Framework for Web Apps 1 Security Tags Implementing security tags with server-side rendering technologies is fairly common, but Spring Security doesn’t ship with any out of the box. Thankfully, setting these up in Free Marker (and others) is fairly straight-forward. This article will leverage knowledge and code exposed in p
Read more