Tags and breadcrumbs

Last reviewed Jun 1, 2026 Content v20260601

Track mode

iframe_html

Means

HTML preview sandbox

Reading

~1 min

Level

beginner

This lesson

This lesson teaches Tags and breadcrumbs—the ideas, syntax, and habits you need before moving on in Bulma.

Bulma offers a lighter component model when Bootstrap feels too heavy or dated.

You will apply Tags and breadcrumbs in contexts like: Smaller marketing sites, internal dashboards, and projects that need quick responsive layout with minimal JS.

Read the lesson, edit HTML/CSS in the playground, press Run to preview, then answer the lesson MCQs.

Toward the end of the track—use it to consolidate patterns before the capstone or summary lessons.

Tags are compact labels for status, counts, and categories: tag with is-success, is-warning, or is-delete (still needs JS for remove behavior). Group tags in tags has-addons for label + value pairs.

Breadcrumb

nav.breadcrumb with an ordered list shows hierarchy—useful above admin tables and docs pages. The active page is the last li.is-active item; earlier items should be real links when destinations exist.

Accessibility

Breadcrumbs benefit from aria-label="breadcrumbs" on the nav.
Status tags should include visible text, not color alone.

Self-check

How do you show a success status on an order row?
Which list item represents the current page in a breadcrumb?

Playground

Runs in your browser in a sandboxed frame. Backend runners appear when this track’s profile allows them.

Discussion

Past discussion is visible to everyone. Only logged-in users can post comments and replies.

Starter discussion topics

tag list semantics?
Breadcrumb current page?

No discussion yet. Be the first to ask a question.