---
title: "components"

doc_type: static
doc_category: static
doc_version: v20270301
source_url:
  html: 'https://developer.shopline.com/docs/online-store-3-0-themes/theme-structure/components'
  md: 'https://developer.shopline.com/docs/online-store-3-0-themes/theme-structure/components.md'
---
# components

The `components` directory contains reusable code snippets, typically for independent features or UI elements such as breadcrumbs, buttons, and icons.

This article uses the breadcrumb UI component as an example to explain its usage.

* * *

## Directory structure{#jkHQK}

There is no strict requirement for the hierarchical structure of the `components` directory. However, it is recommended to organize them by function. Refer to the following example:

```bash
components
└─ breadcrumb            	# breadcrumb component
    ├─ breadcrumb.html    # template file (required)
    ├─ breadcrumb.css     # style file (optional)
    └─ breadcrumb.js      # interaction logic file (optional)
```

* * *

## Reference a component{#z7x0F}

In the page template or section file, reference a component using the [component](https://developer.shopline.com/docs/sline/tag/component.md) tag, following the format `{component directory}/{template filename}`.

The following is an example of referencing a breadcrumb snippet in a theme section file.

```html
<!-- sections/customers-order-detail.html -->

<div class="order-detail-page">
  <section class="order-detail">
    {{#component "breadcrumb/breadcrumb" /}}
  </section>
</div>
```

* * *

## Custom parameter supported{#iapLe}

You can pass multiple custom parameters to the component to achieve varied presentations in different theme modules. The following steps show a basic example of using custom parameters.

### 1\. Pass parameters{#oya7L}

In the file `sections/customers-order-detail.html`, pass the `class` and `title` parameters to the breadcrumb component and assign values to them.

```html
<div class="order-detail-page">
  <section class="order-detail">
    <!-- Pass class and title parameters -->
    {{#component "breadcrumb/breadcrumb" class="hidden-desktop" title="Order Name" /}}
  </section>
</div>
```

### 2\. Retrieve parameters{#yhkns}

In the code snippet file `components/breadcrumb/breadcrumb.html`, retrieve the values of `class` and `title` parameters through the [props](https://developer.shopline.com/docs/sline/object/props.md) object.

```html
<a class="breadcrumb {{props.class}}"> <!-- Retrieve value of class parameter -->
  <div class="breadcrumb__title body1">{{props.title}}</div> <!-- Retrieve value of title parameter -->
</a>

<div class="title">{{props.title}}</div> <!-- Retrieve value of title parameter -->
```

### 3\. Render the result{#OD8KM}

The HTML code appears as follows after rendering the parameters by the template engine.

```html
<div class="order-detail-page">
  <section class="order-detail">
    <a class="breadcrumb hidden-desktop"> <!-- Newly injected class -->
      <div class="breadcrumb__title body1">Order Name</div> <!-- Newly injected title -->
    </a>
    
    <div class="title">Order Name</div> <!-- Newly injected title -->
  </section>
</div>
```