Breadcrumbs

Breadcrumbs are a type of navigation system, which pinpoint the user location on the web app or web site. Breadcrumbs also improve site accessibility and exploration immensely, since they show the user location. The user can understand the hierarchy, and thus this navigation element is quite handy when there is massive content in the site.

Breadcrumbs are a common feature in web apps or sites that have several categories of displayed products/goods—this makes it easier to navigate to a particular category in case you want to check out the different products of similar make/genre. With an ultimate focus on site hierarchy, it enhances the way in which users are aware of the web page or any specific content location, paving the way for an excellent user experience.

In Listing 4-1, we create a box container by using the box class with a <div> element. Then we add a navigation element with the <nav> tag. We go on to assign the breadcrumb class to the <nav> tag. We create an unordered list using the parent <ul> and its child <li> tags.

To the first <li> tag, we assign the is-active class and name it Home. The is-active class will indicate the first <li> tag as the current active item. We then create six more <li> tags and name them accordingly, as seen in Listing 4-1.

The output of the code is shown in Figure 4-1.

In the Bulma breadcrumb component, you can align the breadcrumb to the right or center. Bulma supports different separators like bullet separator, has-succeeds separator, and the arrow separator.

As you see, most of the code is the same as in Listing 4-1. Instead of the box layout, we use the container class as the main <div> element instead of a box layout.

Coming back to the relevant stuff, we add the classes has-arrow-separator and is-right alongside the default breadcrumb class in the <nag> tag. The rest of the code is the same, where we create an unordered list and define the name for each list item.

The output of the code is shown in Figure 4-2.

In Listing 4-3, we create a container for the first breadcrumb. We use the is-small class, is-centered, and has-bullet-separator in conjunction with the breadcrumb class for the first breadcrumb. The rest of the code for the first breadcrumb is similar to the earlier code listings, where we create an unordered list to define names for the breadcrumbs.

Then we create the second breadcrumb inside another container where we add the is-large class, is-centered, and has-succeeds-separator classes in conjunction with the breadcrumb class. The rest of the code is the same as earlier examples, where we create an unordered list and define the names of the breadcrumb items.

The output of the code is shown in Figure 4-3.

As you can see in Figure 4-3, both the breadcrumbs are aligned to the center. While the first breadcrumb is small in size, the breadcrumb below is large in size. Observe the bullet separator and has-succeeds separators for the first and last breadcrumbs, respectively.

In Listing 4-4, we define a main <div> with the container class. Inside we create another <div> element and assign the breadcrumb class in conjunction with the is-centered class to position the breadcrumb at the center of the row.

&nbsp; creates an empty space after the icon. We have also used the is-small class in the span tag and the home icon within the <i> tags, which are within the <span> tags.

Then, we define different icons within each <li> tag for each breadcrumb item based on the relevant names. Also, we have kept the Support breadcrumb item as the current item using the is-active class.

The output of the code is shown in Figure 4-4.

Drop-Downs

Drop-downs are usually created to show the different items/content in a compact way—for example, the distinct categories commonly seen on e-commerce web sites are designed in a panel-like drop-down. You can design an apt site structure and include diverse menu items in a drop-down, eliminating too many links or congestion on the web page. Apart from a clean layout, it also eliminates the need to scroll repeatedly, as the user can access specific information from the links in the drop-down list.

From a UX/UI perspective, you have to consider the mobile platform, where it becomes a different ballgame altogether due to the touch feature and highly compact screens. Also, the links, data, or information in a drop-down should be well organized in line with the user needs. Bulma’s drop-down feature is tailored for all platforms, and is especially compatible with the mobile screen interface owing to its mobile-first paradigm.

In Listing 4-5, we create a <div> element with the dropdown class to make it a main container. For the drop-down button, we create another <div> element and assign the dropdown-trigger class to it. Within this <div>, we define the drop-down button with a white background and, using the icon in conjunction with the button element, we create a small drop-down arrow.

Once we are done with the drop-down button, we create a separate drop-down menu where we will define the drop-down content. We create a <div> and assign the dropdown-menu class to it. Within that <div>, we create a child <div> and assign the dropdown-content to it. Next, we create several links using the anchor <a> link tags with the dropdown-item classes.

After we define four links, we create a drop-down divider using the <hr> tags with the dropdown-divider class. Thereon, we create three more links using the <a> tags with the dropdown-item class for each link.

The output of the code is shown in Figure 4-5.

In Listing 4-6, we create similar drop-down functionality but we add the is-hoverable class in conjunction with the dropdown class for the main <div> element. Then, we create the drop-down button as in the earlier example.

The difference is when we create the drop-down menu. Within the <div> with the dropdown-content class, we create <div> elements and assign the dropdown-item class to each of the menu items as shown in Listing 4-6.

The output of the code will display a drop-down button called Services and, on hovering over it, you can see the drop-down menu items as shown in Figure 4-6.

Tabs

Tabs are an excellent navigation system due to the linear representation of the site structure. Tabs not only help you divide the content into separate sections but also provide a way to access that content. Their intuitive architecture makes users aware of their location on the site quickly.

However, the usability factor of the navigation tabs element depends on how you organize and use their functionality—for example, the heading for each tab should have minimal characters or shorter lengths. Tabs are quite effective when you want to show a string of similar categories/similar genres.

Bulma’s tabs component is quite easy to design and helps site/app’s visitors to access chunks of data in a simple way. However, web designers/developers should take into account the specific user needs, amount of data, and how rapidly users can access that content.

In Listing 4-7, we create a main <div> element and assign the tabs class to it. Then we create an unordered list within that <div> using the <ul> and <li> tags. We assign the is-active class to the first <li> tag to make it the current item.

The output of the code is shown in Figure 4-7.

As you can see, we have a simple navigation system.

Similarly, we create several tabs items.

The output of the code is shown in Figure 4-8.

As you can see from the output, the tabs are positioned at the center of the row and have the relevant items next to the tab names. Moreover, you can also see the classic boxed look for the Home tab, which is the default current tab as defined in the code.

In Listing 4-9, we use the is-boxed and is-toggle classes together in conjunction with the tabs class to allocate a boxed border for each tab. We also use another class, is-toggle-rounded, in conjunction with those classes to give a rounded border for the first and last tabs.

The rest of the code is similar to the earlier example, where we have created tabs with icons using an unordered list.

The output of the code is shown in Figure 4-9.

Navbar

Bulma’s navbar element helps design a horizontal list of links enabling site visitors to access any section in the site. However, from a UI/UX perspective, it has to be minimalistic and simple. The headings should be short in length and the number of headings should be not more than 5 or 6, as it may create unnecessary clutter. You should never design a navbar first and then fit in the content. In fact, it should be the other way around—the navbar should be designed keeping content at the crux of your site structure, to ensure high-degree of readability and rapid access.

In Listing 4-10, we define a navigation element <nav> and assign the navbar class to it. The navbar class results in a navigation bar container. Within the <nav> tags, we create a main < div> tag and assign the navbar-brand class to it. This navbar-brand element is the left side of the navbar, which is always visible and usually contains logo and links. Thereon, we create an anchor tag and assign the navbar-item class to it. The navbar-item class usually is used for various items on the navbar, but here we use it for the anchor link, pointing toward a site. Then we define the logo using the <img> tag.

Next, we create the hamburger icon, which is called the navbar-burger in Bulma. For this, we create another anchor tag and assign the navbar-burger class to it. We use a burger class in conjunction with the navbar-burger class to facilitate action using JavaScript. We set a data-target attribute and assign the value Navicon to it. We create three <span> elements without any label or name for creating three lines of the hamburger icon functionality.

Once we are done with the navburger, we create a separate <div> and assign the navbar-menu class to it. We also assign an id, whose value is the Navicon, which incidentally is also the value of the data-target attribute mentioned earlier.

Then we create another <div> tag within the preceding <div> and define the navbar-start class to it, which will align the navbar menu to the left of the logo. We move on to create five anchor links and assign the navbar-item class to each of them, and define the menu items on the navbar at the left of the logo.

Next, we create another <div> and assign the navbar-end class to it. This will align the menu-items defined here to the right of the navbar. We define a <div> element within it and assign the navbar-item class to it. We create a Login button and assign the is-outlined class to it.

The output of the code is shown in Figure 4-10.

Progress Bars

A progress bar is an excellent way of showing the progress of any action. It is usually an indicator of the downloading process and enables the user to visualize the progression of the download operation.

In Listing 4-11, we create a box container and define two progress bars. We use the <progress> element and assign a progress class to it, and also assign a contextual primary color to it using the is-primary class. We set the bar value as 15, with 100 being the maximum value. For this, we use the value attribute and the max attribute.

Next, we similarly define the second progress bar with 35 as the value and a maximum value of 100. We assign the contextual warning color to it.

The output of the code is shown in Figure 4-11.

In Listing 4-12, we create two progress bars and assign the values 50 and 65 in conjunction with the progress class. We use the is-medium size class for both progress bars. We also define the contextual colors by assigning the is-info and is-success classes to them, respectively.

The output of the code is shown in Figure 4-12.

In Listing 4-13, we create two progress bars and assign the is-large class in conjunction with the progress class to each of them. We define the link and danger contextual colors to the two progress bars, and also define 77 and 90 as the values for the two progress bars.

The output of the code is shown in Figure 4-13.

In Listing 4-14, we have created 2 progress bars with different contextual colors but we have not used a value attribute though we have retained the max attribute.

The output of the code is shown in Figure 4-14.

Notifications

Notifications are a visual aid to attract the attention of the users. At times, they prompt the users to complete an action; sometimes they may be used to show important/helpful information to the users. Updates/alerts are types of notifications, while push subscription messages/context pop-ups are other use cases usually found in modern layouts.

In Listing 4-15, we first create a columns container and assign the is-multiline class in conjunction with the columns class. Then we define three columns of different sizes. Inside each <div> element column, we use the notification class and also create a delete button for those notifications by using the delete class for each <button> element.

The first column occupies the space of five columns, whereas the second column is allocated a space of five columns and is offset by one column. The third column is assigned the space of half the 12-column grid and is assigned an offset of two columns. While the first notification is assigned a primary contextual color, the second notification is assigned the link contextual color using the is-primary and is-link classes, respectively. The third notification is not assigned any color and will take up the default color for the notification attribute.

The output of the code on a tablet screen is shown in Figure 4-15.

Images

Bulma’s image element is a container for responsive images or pictures. Bulma’s image element can not only be used for creating rounded and Retina images but also for defining ratio-based responsive images—for example, images used in still photography displayed consistently on various devices/screen-sizes.

In Listing 4-16, we use two <figure> tags for the same image, with the image class assigned to each of them. We use the <img> tag for defining the source of the image. While the first image is assigned a size of 48×48 using the is-48×48 class, the second image is assigned a size of 128×128 using the is-128×128 class in conjunction with the image class.

The output of the code is seen in Figure 4-16.

In Listing 4-17, we use the <figure> tag and assign a size of 128×128 to the image. Next, for the <img> tag, we assign the is-rounded class, which gives a rounded border shape to the image.

The output of the code is shown in Figure 4-17.

If you do not know the exact dimensions, you can still define a ratio for the images.

In Listing 4-18, we use the <figure> tags and use the is-3by2 ratio modifier class in conjunction with the image class. Then we define the image source using the <img> tag.

The output of the code is seen in Figure 4-18.

Tags

In blogs you may see tags, which are labels that are relevant to that article. It is a handy element in today’s digital design era, especially used in digital photos programs, web pages, blogs, articles, and social media platforms.

A particular use case is in blogs where you promote your products/goods. You will use relevant tags to increase the scope of the product. But your site visitors/users may come out with different tags, which may be market-based, location-based, or context-based. For example, consider a blog on a datacenter. You may use tags like “Data-Center operations,” “Digital Datacenters,” and “Innovation-in-Datacenters” for your company blog/article. Your users/customers/readers may add tags like “colocation,” “digital transformation,” “IoT,” “DCIM,” “Sustainability,” “Data-center Planning,” and “Data-center-Energy-Efficiency” or even their company name to increase the reach and exposure of their solutions/concepts.

In Listing 4-19, we create a box container within which we define a paragraph tag <p> and assign the has-text-centered class to it so that the output is centered. Then we create three tags using the tag class. We enclose it in three <span> elements and after assigning the tag class to each <span> element, we assign different contextual colors—primary, link, and success—to the three <span> elements, respectively.

The output of the code is shown in Figure 4-19.

The code in Listing 4-20 is almost the same as that in Listing 4-19, but it uses the is-rounded class in conjunction with the tag and contextual color classes.

The output of the code is shown in Figure 4-20.

In Listing 4-21, we create a box container and define three <div> elements. Within the first <div> tags, we create two <span> elements, and assign the tag class with different contextual color classes.

Then we create another <div> and we assign the tags are-medium class to it.

Within this <div> tag, we create two <span> elements and assign the tag class in conjunction with the contextual color classes.

Moving forward, we create a third <div> element and assign the are-large class to it.

Then we similarly create two <span> elements and assign the contextual classes to them in conjunction with the tag class.

The output of the code is shown in Figure 4-21.

The Listing 4-22 code is the same as in Listing 4-21, where we create three <div> elements with normal, medium, and large classes assigned to them. Also, we create two <span> elements for creating two tags in each <div> section.

The only difference is in each <div> element, to which we assign the tags has-addons class to attach the two tags.

The output of the code is shown in Figure 4-22.

In Listing 4-23, we create a box container to house two <div> sections where we create medium-sized tags and attach two tags under each <div> element.

To the first <div>, we assign the tags has-addons class in conjunction with the are-medium class. We create two tags using <span> elements. Then we use a <button> element and assign the delete class to it.

For the second <div>, we create two medium-sized attached tags the same way. However, in this <div>, instead of the button element, we use an <a> anchor link tag and assign the tag is-delete class to it.

The output of the code is shown in Figure 4-23.

In Listing 4-24, we create a box container and create a parent <div> element and assign the field is-grouped and the is-grouped-multiline classes to it.

Then we create multiple several <div> containers. In each <div> child container, we create subchild <div>s and assign the control class to them. Next, we create attached tags using the tags has-addons class and create two anchor links, where we create each contextual color tag and append with the delete tag.

We create several <div> elements with the control class, and within them we append two tags using the process mentioned earlier.

The output of the code is shown in Figure 4-24.

The output in Figure 4-24 has a look similar to the tags used in corporate blogs or on the LinkedIn portal among other platforms.

Pagination

Pagination is quite useful in segregation of content in multiple pages and indicates the toggling effect, helping users find the specific content easily. It prevents users from getting overwhelmed with content overload and divides the content into discrete pages, resulting in remarkable readability. Thus, pagination helps reduce complexities and enhances content exploration in a well-organized way.

In Listing 4-25, to create the pagination, we initially create a navigation <nav> element and assign a pagination class to it. Then we create two links and assign the pagination-previous and pagination-next classes to it, respectively.

Then we create the pagination buttons by using an unordered list. The parent <ul> tag is assigned the pagination-list class. Within the <ul> element, we create the list items using anchor <a> tags.

First, we create an anchor link <a> and assign the pagination-link class to it. We also assign the is-current class to it to make it look like the current page. We assign 1 as the starting number of the page.

Then we create the second <li> tag and use a <span> element and assign the pagination-ellipsis class to it. The ellipsis creates dots, which is the range separator. Within the <span> tags, we insert the &hellip; to complete the functionality of the ellipsis.

We move on to create the third anchor link tag and assign the pagination-link class to it and enter the page number as 4. Similarly, we create another pagination list item and name it as 5 for the page number.

The output of the code is shown in Figure 4-25.

The code example in Listing 4-26 for creating the pagination is the same as in Listing 4-25.

Instead of a single <nav> element, we create three separate <nav> elements. The first <nav> element is assigned the pagination is-small class (instead of the pagination class in default size) to create a small-sized pagination feature.

For medium-sized and large-sized pagination output, we use the pagination is-medium and pagination is-large classes for the second and third <nav> elements, respectively.

The output of the code is shown in Figure 4-26.

You can change the alignment of the pagination component. You can center it or align it to the right. Apart from that, you can also use the disabled attribute to disable a link. You can also create rounded pagination components by using the is-rounded class.

In Listing 4-27, the process to create the pagination is the same. The specific difference is that for the first <nav> element, we assign the is-rounded class in conjunction with the pagination class for defining the rounded shape for the pagination component. Thereon, we also assign the is-right class, which will align the pagination component to the right of the web page.

Then, in the first <a> element with the pagination-previous class, we add the disabled attribute to show that the link is disabled. The rest of the code is the same as that for the pagination components in the earlier examples.

Once we are done with the first pagination component, we create the second pagination component using another <nav> element. We assign the pagination is-rounded class to this <nav> tag. Here, in conjunction with the pagination is-rounded class, we assign an is-centered class to align the pagination component to the center. We also use the disabled attribute in the first anchor tag akin to the previous navigation element resulting in a grayed-out look for the link.

The rest of the code is the same as that of the first <nav> element or the earlier examples.

The output of the code is shown in Figure 4-27.

In Figure 4-27, you can see that the first pagination component is aligned to the right. The Previous & Next page labels are shifted to the left due to this alignment. In addition, the Previous label is grayed-out due to the disabled attribute.

As for the second pagination component, the alignment is to the center. Here, the Previous & Next page labels are on opposite ends of the page. Both these screenshots are taken on a tablet-sized screen.