Breadcrumb Component

Figma

The glu-breadcrumb component is a navigation element used to display the current page's location within a hierarchy. When an href is provided, the breadcrumb becomes a clickable link. It also supports customization of the separator via a named slot.

---

Basic Usage

Example 1: Simple Breadcrumb

Use the breadcrumb as a non-clickable label.

HTML

Result

Loading...

Live Editor

<glu-breadcrumb>
  Home
</glu-breadcrumb>

React

Result

Loading...

Live Editor

<GluBreadcrumb>
  Home
</GluBreadcrumb>

Vue

Result

Loading...

Live Editor

<glu-breadcrumb>
  Home
</glu-breadcrumb>

<script setup>
import { GluBreadcrumb } from '@gelato-ui/vue';
</script>

Angular

Result

Loading...

Live Editor

<glu-breadcrumb>
  Home
</glu-breadcrumb>

Result

Loading...

Live Editor

import { Component } from '@angular/core';
import { GluBreadcrumb } from '@gelato-ui/angular';

@Component({
  standalone: true,
  imports: [GluBreadcrumb],
  template: `<glu-breadcrumb>Home</glu-breadcrumb>`
})
export class MyComponent {}

---

Breadcrumb as a Link

When an href is provided, the component renders as an anchor tag, making it clickable.

HTML

Result

Loading...

Live Editor

<glu-breadcrumb href="https://example.com">
  Home
</glu-breadcrumb>

React

Result

Loading...

Live Editor

<GluBreadcrumb href="https://example.com">
  Home
</GluBreadcrumb>

Vue

Result

Loading...

Live Editor

<glu-breadcrumb href="https://example.com">
  Home
</glu-breadcrumb>

<script setup>
import { GluBreadcrumb } from '@gelato-ui/vue';
</script>

Angular

Result

Loading...

Live Editor

<glu-breadcrumb href="https://example.com">
  Home
</glu-breadcrumb>

Result

Loading...

Live Editor

import { Component } from '@angular/core';
import { GluBreadcrumb } from '@gelato-ui/angular';

@Component({
  standalone: true,
  imports: [GluBreadcrumb],
  template: `<glu-breadcrumb href="https://example.com">Home</glu-breadcrumb>`
})
export class MyComponent {}

---

Custom Separator

By default, the breadcrumb displays an arrow icon as a separator. You can customize this by providing your own content for the separator slot.

HTML

Result

Loading...

Live Editor

<glu-breadcrumb>
  Home
  <span slot="separator">/</span>
</glu-breadcrumb>

React

Result

Loading...

Live Editor

<GluBreadcrumb>
  <>
    Home
    <span slot="separator">/</span>
  </>
</GluBreadcrumb>

Vue

Result

Loading...

Live Editor

<glu-breadcrumb>
  Home
  <template #separator>/</template>
</glu-breadcrumb>

<script setup>
import { GluBreadcrumb } from '@gelato-ui/vue';
</script>

Angular

Result

Loading...

Live Editor

<glu-breadcrumb>
  Home
  <span slot="separator">/</span>
</glu-breadcrumb>

Result

Loading...

Live Editor

import { Component } from '@angular/core';
import { GluBreadcrumb } from '@gelato-ui/angular';

@Component({
  standalone: true,
  imports: [GluBreadcrumb],
  template: `
    <glu-breadcrumb>
      Home
      <span slot="separator">/</span>
    </glu-breadcrumb>
  `
})
export class MyComponent {}

---

Full Breadcrumb Navigation

To build a complete breadcrumb navigation, combine multiple glu-breadcrumb components within a navigation container.

HTML

Result

Loading...

Live Editor

<nav aria-label="breadcrumb" style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
  <glu-breadcrumb href="/home">Home</glu-breadcrumb>
  <glu-breadcrumb href="/library">Library</glu-breadcrumb>
  <glu-breadcrumb>Data</glu-breadcrumb>
</nav>

React

Result

Loading...

Live Editor

function BreadcrumbNav() {
  return (
    <nav aria-label="breadcrumb" style={{ display: 'flex', alignItems: 'center' }}>
      <GluBreadcrumb href="/home">Home</GluBreadcrumb>
      <GluBreadcrumb href="/library">Library</GluBreadcrumb>
      <GluBreadcrumb>Data</GluBreadcrumb>
    </nav>
  );
}

Vue

Result

Loading...

Live Editor

<nav aria-label="breadcrumb" style="display: flex; align-items: center;">
  <glu-breadcrumb href="/home">Home</glu-breadcrumb>
  <glu-breadcrumb href="/library">Library</glu-breadcrumb>
  <glu-breadcrumb>Data</glu-breadcrumb>
</nav>

<script setup>
import { GluBreadcrumb } from '@gelato-ui/vue';
</script>

Angular

Result

Loading...

Live Editor

<nav aria-label="breadcrumb" style="display: flex; align-items: center;">
  <glu-breadcrumb href="/home">Home</glu-breadcrumb>
  <glu-breadcrumb href="/library">Library</glu-breadcrumb>
  <glu-breadcrumb>Data</glu-breadcrumb>
</nav>

Result

Loading...

Live Editor

import { Component } from '@angular/core';
import { GluBreadcrumb } from '@gelato-ui/angular';

@Component({
  standalone: true,
  imports: [GluBreadcrumb],
  template: `
    <nav aria-label="breadcrumb" style="display: flex; align-items: center;">
      <glu-breadcrumb href="/home">Home</glu-breadcrumb>
      <glu-breadcrumb href="/library">Library</glu-breadcrumb>
      <glu-breadcrumb>Data</glu-breadcrumb>
    </nav>
  `
})
export class MyComponent {}

---

Properties

Property	Attribute	Description	Type	Default
href	href	Optional URL for the breadcrumb. If provided, the breadcrumb becomes a clickable link.	string	undefined

Slots

Slot	Description
	The default slot for the breadcrumb label or content.
"separator"	An optional slot for customizing the separator between breadcrumb items. Defaults to an glu-icon with name="arrow-right".

Dependencies

Depends on

• glu-icon

Graph

---

Built with StencilJS