Symfony include navbar html into Twig template

Question

My Symfony application has a defaultBundle which loads a default.html.twig successfully.

I am trying to include the contents of a navbar.html.twig into default.html.twig. The following code is my attempt to include the navbar code:

{% block body %}

    {% include ('navbar.html.twig') %} <!-- this generates the error -->

    <div class='content'>
        {{ include('@Stock/StockController/create.html.twig') }} <!-- this works-->
        {{ include('@Sales/Sales/add.html.twig') }}     <!-- this works -->
    </div>

{% endblock %}

Both default.html.twig and navbar.hmtl.twig are in the same directory so I assumed my include code above should work but I get the following error:

Unable to find template "@navbar.html.twig" in ::base.html.twig at line 10.

My Symfony skills are not quite acute yet so I'm not sure what the connection to base.html.twig is. How can I resolve this?

PS:

Just in case, the navbar code is from BootStrap and is as follows:

    <nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

Update

Thanks to everyone who has suggested answers. I updated my code to show include statements from other bundles which work. The worrying thing is I have tried pretty much all suggestions before and after posting my question. Still no closer to resolving this.

The following is the tree structure of my bundle's view directory showing my 2 templates in relation to their parent directory:

.
├── Controller
│  │   └── DefaultController.php
├── DeckBundle.php
├── DependencyInjection
│   ├── Configuration.php
│   └── DeckExtension.php
├── Resources
│   ├── config
│   │   ├── routing.yml
│   │   └── services.yml
│   ├── doc
│   │   └── index.rst
│   ├── public
│   │   ├── config.rb
│   │   ├── css
│   │   │   ├── config.rb
│   │   │   ├── sass
│   │   │   │   ├── ie.scss
│   │   │   │   ├── default.scss
│   │   │   │   ├── print.scss
│   │   │   │   └── screen.scss
│   │   │   └── stylesheets
│   │   │       ├── ie.css
│   │   │       ├── default.css
│   │   │       ├── print.css
│   │   │       └── screen.css
│   │   ├── images
│   │   └── js
│   │       └── maindeck.js
│   ├── translations
│   │   └── messages.fr.xlf
│   └── views
│       ├── Default
│       │   ├── default.html.twig
│       │   └── navbar.html.twig

Serge Kvashnin · Accepted Answer · 2015-05-06T05:10:06.253

5

You don't need to use @. You can include template like this

{% include('navbar.html.twig') %}

or like this

{% include('DefaultBundle::navbar.html.twig') %}

UPDATE

The template naming and locations and include reference.

UPDATE#2

{% include('::navbar.html.twig') %}

UPDATE#3

With the structure you've shown, you need to include the folder name:

{% include('DefaultBundle:Default:navbar.html.twig') %}

edited May 06 '15 at 05:10

answered May 04 '15 at 06:08

Serge Kvashnin

4,332
4
23
37

I added a Resource/view directory tree structure update to my original post – sisko May 05 '15 at 22:42

score 0 · Answer 2 · answered May 04 '15 at 09:47

The error clearly states that the template that you are trying to include could not be located. This happens because you haven't provided the full path to the partial file.

First of all, the correct format for including a partial is

 {%  include 'BundleName:FolderName:filename.html.twig' %}

All the templates are usually located inside the resources/views folder in bundles. The 'FolderName' corresponds to the folder inside resources/views that contains your navbar.html.twig file.

Symfony include navbar html into Twig template

Update

2 Answers2