# Convert the New Topic button to a have a sub menu

**URL:** <https://meta.discourse.org/t/convert-the-new-topic-button-to-a-have-a-sub-menu/212300>\
**Category:** Development\
**Created:** [December 16, 2021, 1:09pm UTC](https://meta.discourse.org/t/convert-the-new-topic-button-to-a-have-a-sub-menu/212300 "2021-12-16T13:09:13Z")\
**Posts on this page:** 1\
**Showing post:** 7

<div class="post-metadata">

**Author:** ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)\
**Post date:** [December 16, 2021, 4:05pm UTC](https://meta.discourse.org/t/convert-the-new-topic-button-to-a-have-a-sub-menu/212300/7 "2021-12-16T16:05:24Z")

</div>

Oh I just did something like this last week…

 ![Screen Shot 2021-12-16 at 11.01.16 AM](https://global.discourse-cdn.com/meta/original/3X/f/6/f60db88f77067ec99883b74af2d7f71f66693c2e.png)

In a theme you can add this to `javascripts/discourse/components/new-topic-dropdown.js`

```js
import { action } from "@ember/object";
import { getOwner } from "discourse-common/lib/get-owner";
import Composer from "discourse/models/composer";
import DropdownSelectBoxComponent from "select-kit/components/dropdown-select-box";
import { computed } from "@ember/object";

export default DropdownSelectBoxComponent.extend({
  classNames: ["new-topic-dropdown"],

  selectKitOptions: {
    icons: ["plus"],
    showFullTitle: true,
    autoFilterable: false,
    filterable: false,
    showCaret: true,
    none: "topic.create",
  },

  content: computed(function () {
    const items = [
      {
        id: "new_discussion",
        name: "New Topic",
        description: "Start a new discussion",
        icon: "comment",
      },
    ];

    items.push({
      id: "new_ticket",
      name: "Support ticket",
      description: "Start a support request",
      icon: "tag",
    });

    return items;
  }),

  @action
  onChange(selectedAction) {
    const composerController = getOwner(this).lookup("controller:composer");

    let tags = null;
    let categoryId = this.category ? this.category.id : null;

    if (selectedAction === "new_ticket") {
      tags = "ticket";
    }

    composerController.open({
      action: Composer.CREATE_TOPIC,
      draftKey: Composer.DRAFT,
      categoryId: categoryId,
      tags: tags,
    });
  },
});

```

This adds “new topic” and “support ticket” options to a dropdown button… “new topic” opens the composer as usual, and “support ticket” opens the composer with the tag “ticket” already added.

…and then in `javascripts/discourse/connectors/after-create-topic-button/new-topic-dropdown.hbs`

```hbs
{{#if currentUser}}
  {{new-topic-dropdown category=category}}
{{/if}}

```

…then with some CSS you’ll probably want to hide the default button:

```css
.navigation-controls {
  #create-topic {
    display: none;
  }
}

```

---

_[View the full topic](https://meta.discourse.org/t/convert-the-new-topic-button-to-a-have-a-sub-menu/212300)._