Incorporating custom CSS and HTML into the link is essential for enhancing the appearance of KnpMenu

I'm working with the KnpMenuBundle and I need to customize a link that has the route 'uri'=>'#'. How can I achieve this?

The desired link should be styled like this:

<a href="#" class="js-sub-menu-toggle">
        <span class="text">Settlements</span><i class="toggle-icon fa fa-angle-left"></i>
    </a>

Currently, the link is rendering as:

<a class="asdfasdf" href="#">Settlements</a>

Here's my code snippet:

$menu->addChild($name, $array(
           'uri' => '#'
      ));

Thank you!

htmlcsssymfonytwigknpmenubundle

Answer №1

Consider implementing something similar to the code snippet below:

$menu->addChild('<span class="text">Cities</span><i class="toggle-icon fa fa-angle-left"></i>', array(
    'uri' => '#',
    'class' => 'js-sub-menu-toggle',
    'extras' => array(
        'safe_label' => true
    ),
));

To ensure that your Twig is able to render raw HTML using knp_menu_render( function, you can refer to this related answer:

{{ knp_menu_render('main', {'allow_safe_labels': true}) | raw }}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Oops! Looks like we have encountered an issue with reading the property 'checked' of nothing

Whenever I click the checkbox, an image should be displayed. Unfortunately, I encountered an error: Uncaught TypeError: Cannot read property 'checked' of null at (index):185 at dispatch (VM576 jquery.min.js:3) at i (VM5 ...

javascriptjqueryhtmlcssangular

Obtain the JSON response from an invoked function

I am developing a Symfony website and currently have two functions that both return a JsonResponse: public function myFirstFunction() { mySecondFunction(); return new JsonResponse(JsonResponse from mySecondFunction() ????); } public function mySe ...

phpjsonsymfonyjsonresponse

Full height Footer using Flash and HTML

Seeking advice: I successfully implemented a Flash object with 100% height and width on an HTML page. However, I am struggling to add an HTML footer that stays fixed at the bottom of the page. Attempts made: I have tried various solutions, searched on Go ...

htmlcssflash

Tips for displaying two input decorations in Material UI beside one another within a text field

In the Text Field demonstration, I noticed input adornments at the start and end. However, I am looking to have two input adornments at the end specifically. I attempted to add them using endAdornment: {InputAdornment InputAdornment}, but encountered an er ...

javascriptcssreactjsmaterial-ui

Interactive feature allowing all embedded YouTube videos on a webpage to play synchronously, with sound disabled, and on a continuous loop

I am in the process of developing a button that, when clicked by a user, will trigger all embedded YouTube videos on a specific webpage to start playing simultaneously, with sound muted, and set to loop. The target page for this button implementation can ...

javascripthtmljquerycss

Adding Items to the Beginning of a Drop-down List using jQuery.prepend

I have created a select list for various types of restaurants. Users can choose a food type, click search, and receive a list of restaurants specializing in that particular cuisine. To add an initial option to the select dropdown, I used the following cod ...

jqueryhtml

Arranging two list items (<li>) side by side in HTML code

I am currently designing a form with a side navigation bar that will display around 15-20 elements. Each element is represented by an <li> containing a link to open a modal when clicked. This is the current structure of my code: <div id="sidebar ...

htmlcss

Steps to convert HTML <li> elements into HTML <datalist> elements

In my HTML file, I have a list of objects within li elements that I would like to transfer to an HTML datalist within the same file. I am currently working on a Node.js Express framework application where the data within the li elements is coming from an S ...

htmlnode.jsexpress

Alter the content of an HTML page depending on whether a user is logged in two times on the same page

Currently, I am in the process of developing a login system for my website. Everything seems to be functioning correctly so far. However, I have an idea to enhance the user experience by displaying their name with a 'Manage' button next to it whe ...

phphtml

Guide on exporting Excel data using Angular and TypeScript

My project involves managing a table of information that includes fields for FirstName, LastName, PhoneNumber, Age, and Date. I've created a function that allows me to export the data to an Excel file, but I only want to export specific fields like Fi ...

htmlcssangulartypescript

dismiss data and button for closing notification bar

I am currently using a notification bar at the top of my website, instead of a modal. I am wondering if it is possible to click the X (close-button) and have the notification bar disappear. I attempted to use data-dismiss but it did not work. Also, how can ...

htmlcss

Filling a blank table using jQuery

I am attempting to search for an item by sending a GET request to my service and then populating my table with the response, but I am struggling to achieve this with my current code. $(function(){ var $searchInput = $("#search"); $("#searchOptions").c ...

jqueryhtmlhtml-table

Printing with tiled SVG background images

Whenever I use an SVG tile as the background for my website, it appears perfectly fine when viewed in a browser. However, when I try to print the page, it scales in a strange and nonuniform way. Is there a solution to prevent this distortion when printing ...

csssvgbackground-image

What is the best way to retrieve ul li values using AngularJS?

I am looking to extract the content of li elements within a ul element in an AngularJS controller and save them into an array. Sample HTML Code: <ul id="list" my-directive> <li>A</li> <li>B</li> <li>C ...

javascripthtmlangularjs

Step-by-step guide to implementing a user-friendly search input field using the powerful AngularJS material design framework

I am searching for an effortless method to implement a feature similar to the expandable search text field in angular-mdl. By clicking on a search button, it will expand into a text field. <!-- Expandable Textfield --> <form action="#"> < ...

javascripthtmlcssangularjsangular-material

Troubleshooting the Issue with Jquery Menu and Mouse Pointer

Recently, I've been attempting to modify the cursor behavior on a navigation menu that I stumbled upon at HTML Drive's JQuery Menu. I experimented with CSS and jQuery. In my JQuery attempt, I utilized... $("body").hover(function() { $(this).cs ...

jquerycssuser-interfacenav

Is it possible to create a carousel using PHP and MySQL?

Is it really impossible? I'm determined to pull images from a MySQL database and create a carousel similar to the one showcased in this link: . However, my goal is to achieve this using only HTML, CSS, PHP, and MySQL. ...

phphtmlmysqlcsscarousel

Struggling to get a basic HTML form to function with JavaScript commands

In my form, there are two input fields and a button. Upon clicking the button, a JavaScript function is triggered which multiplies the values entered in the inputs. The result is then displayed in a <p> element and evaluated through an if else statem ...

javascripthtml

Execute jQuery after Angular has completed its loading process

I'm currently working on making some small adjustments to an existing website. This website was originally created using Angular. While my code is written with jQuery, I do have the flexibility to use any type of JavaScript necessary. Despite this, ...

javascriptjqueryhtmlangularjs

Conceal the footer using CSS while the slide is in focus

Trying to figure out a way to hide the footer when a specific container is active: For example, how can I hide the footer when the second and third items are selected as active? <div class="owl-stage"> <div class="owl-item"></div> & ...

jqueryhtmlcss