Symfony include navbar html into Twig template

10,209

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') %}
Share:
10,209
sisko
Author by

sisko

Professional web developer making the transition into Robotics

Updated on June 05, 2022

Comments

  • sisko
    sisko almost 2 years

    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
    
  • sisko
    sisko almost 9 years
    I added a Resource/view directory tree structure update to my original post