Reactstrap — Badges and Breadcrumbs

Image for post
Image for post
Photo by Natalie Scott on Unsplash

Reactstrap is a version Bootstrap made for React.

It’s a set of React components that have Boostrap styles.

In this article, we’ll look at how to add badges and breadcrumbs with Reactstrap.

Badges

We can add badges to display some content besides another piece of text.

To add them, we use the Badge component:

We add badges in various heading tags.

The color prop changes the color.

The badges scale to the same size as the text beside it.

Badges can be used for counters in buttons:

We add the Badge in the button to display a number beside the button text.

Contextual Variations

There are many variations of badges.

They have different colors.

We can change the color prop:

We set the color prop to those choices to set the colors we want.

Pills

We can make them rounded with the pill prop:

The pill prop make the border-radius rounder.

Links

Badges can also have links.

For example, we can write add the href prop to them:

The href prop goes in the Badge component.

Breadcrumbs

Breadcrumbs let us navigate to different pages by providing the links for the navigation hierarchy.

To add it, we use the Breadcrumb and BreadcrumbItem components.

For example, we write:

The Breadcrumb component has the breadcrumb and BreadcrumbItem component has the breadcrumb item.

The active prop makes an item active.

If it’s active, then it shouldn’t have a link.

Other props include tag to change the tag that the breadcrumb is rendered as.

listTag is the tag that the breadcrumb list container are rendered as.

BreadcrumItem also takes a tag prop to change the tag it’s rendered as.

For example, we can write:

We set the tags to change the element they’re rendered as.

Conclusion

Reactstrap comes with components for badges and breadcrumbs.

Written by

Web developer. Subscribe to my email list now at http://jauyeung.net/subscribe/. Email me at hohanga@gmail.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store