# How to attach a component to a widget with just markup?

**URL:** https://meta.discourse.org/t/how-to-attach-a-component-to-a-widget-with-just-markup/82634
**Category:** Development
**Created:** [March 9, 2018, 5:00pm UTC](https://meta.discourse.org/t/how-to-attach-a-component-to-a-widget-with-just-markup/82634 "2018-03-09T17:00:03Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![duranmla](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/duranmla/32/109295_2.png) [@duranmla](https://meta.discourse.org/u/duranmla)
#### Post date: [March 9, 2018, 5:00pm UTC](https://meta.discourse.org/t/how-to-attach-a-component-to-a-widget-with-just-markup/82634/1 "2018-03-09T17:00:03Z")

</div>

Hi all, I am new in Discourse development, but I am on a project to create few plugins (for specific proposes.)

I’m making a plugin to display a stripe of categories on the site and it has some other nifty effects, to **summarize I just need to render a custom component created using `select-kit` within a widget that has just an html template**.

My component:

```plaintext
createWidget('category-bar', {
  tagName: 'div.category-bar-container',
  template: hbs`
  <ul id="header-tags" class="category-bar">
    <li class="category-bar-item">
      <a class="category-bar-link" href="/c/sexuality">
        {{i18n "ahwaa_categories.sexuality"}}
      </a>
    </li>
    ....
  </ul>
  HERE I WANT TO RENDER LIKE:
  <div class="category-bar-link dropdown-structure">
    {{categories-bar-dropdown}} <--- this won't work and neither {{attach widget=categories-bar-dropdown}}
  </div>
  `,
});

```

My component of dropdown looks like:

```plaintext
export default DropdownSelectBoxComponent.extend({
  pluginApiIdentifiers: ["categories-bar-dropdown"],
  classNames: "categories-bar-dropdown",
  title: I18n.t("ahwaa_categories.more"),
  showFullTitle: true,
  allowInitialValueMutation: false,
  headerIcon: ["caret-down"],

  autoHighlight() {},

  computeContent() {
    const items = [
      { id: "id", name: I18n.t("plugin.locale.key") },
      ...
    ];

    return items;
  },

  mutateValue(id) {
    // use the id from the computeContent items to do an action
  }
});

```

**PD:** if you have also the code to loop between the categories of the site will be great (but I haven’t google it yet so we can skip that)