# Nested links in templates through {{#link-to}} helper

**URL:** <https://discuss.emberjs.com/t/nested-links-in-templates-through-link-to-helper/6360>\
**Category:** Uncategorized\
**Created:** [September 27, 2014, 11:34am UTC](https://discuss.emberjs.com/t/nested-links-in-templates-through-link-to-helper/6360 "2014-09-27T11:34:13Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![dhruvparmar372](https://avatars.discourse-cdn.com/v4/letter/d/50afbb/32.png) [@dhruvparmar372](https://discuss.emberjs.com/u/dhruvparmar372)\
**Post date:** [September 27, 2014, 11:34am UTC](https://discuss.emberjs.com/t/nested-links-in-templates-through-link-to-helper/6360/1 "2014-09-27T11:34:13Z")

</div>

I would like to have two links nested in each other in the template. My use case is this

```auto
{{link-to "conversation"}}
<li>
    Conversastion Data
    {{link-to "channel"}}Channel{{/link-to}}
</li>
{{/link-to}}

```

For some reason ember closes the parent link before the beginning of the `<li>`. Is this kind of nesting possible in Ember ?

---

<div class="post-metadata">

**Author:** ![knu2xs](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/knu2xs/32/15916_2.png) [@knu2xs](https://discuss.emberjs.com/u/knu2xs)\
**Post date:** [September 27, 2014, 1:36pm UTC](https://discuss.emberjs.com/t/nested-links-in-templates-through-link-to-helper/6360/2 "2014-09-27T13:36:23Z")

</div>

I ran across the same issue with Bootstrap navigation. It seemed rather kludgy to use the doubled link method.

Although I cannot recall where I found this, here is a solution for getting the active status of the parent element, but setting up the link correctly. Obviously the `link-to` target route needs to be changed, but the `bind-attr href` should be left as is.

```
{{#link-to "reach.index" tagName="li" href=false}}
  <a {{bind-attr href="view.href"}}>
    Overview
  </a>
{{/link-to}}

```

The other issue I ran across is I want the entire parent `li` block to have a finger pointer when moused over, for the entire block to appear to the end user as a link. To get this behavior, add this to your css.

```
.navbar-nav > li > a {
    cursor: pointer;
}

```

Ideally I should build a handlebars helper or component to take care of this, but I have yet to actually learn how to do this. Right now I just keep this as a Gist where I can quickly copy and paste it into my projects.

Hopefully this saves you the day of consternation I endured to figure this out!