Codeigniter: How To 'highlight' The Link Of The Page The User Is Currently On?

August 29, 2023 Post a Comment

Fairly new to CodeIgniter, still grasping the MVC approach. I'm just wondering what's the best way to solve this: I got my navigation bar highlighting the currently active link lik

Solution 1:

Non-specific to CI this is just logical checks agains the current page name.

When you get the page name in CI such as

$pageName = 'blog.html';

Then you can do the following

<ahref="index.html"<?phpecho$pageName == 'index.html' ? 'id="active"' : ''; ?>>Index</a><ahref="blog.html"<?phpecho$pageName == 'blog.html' ? 'id="active"' : ''; ?>>Blog</a>

Solution 2:

First of all you should not be using id for that kind of things, id is to give a unique identification number to each DOM element on the page, for what, we best use a class.

Code Igniter provides a lot of helpers and classes that become part our tools, probably you have heard of "URL Segments" before.

$this->uri->segment(n)

Permits you to retrieve a specific segment. Where n is the segment number you wish to retrieve. Segments are numbered from left to right. For example, if your full URL is this:

http://example.com/index.php/news/local/metro/crime_is_up

The segment numbers would be this:

news
local
metro
crime_is_up

http://codeigniter.com/user_guide/libraries/uri.html

you can use that to retrieve the current URL segment that represents the Active Page you are actually displaying on the browser.

Solution 3:

I used @Calle example, worked really well... I did have to use a custom url grabber instead of the CI current_url() as I'm bypassing the index.php file with .htaccess. I have also added the correct attribute tag.

Notes for beginners I crated this file in 'helpers' called 'menu_helper.php' and loaded it via the controller $this->load->helper('menu');

helpers/menu_helper.php

if ( ! function_exists('menu_anchor'))
{
    functionmenu_anchor($uri = '', $title = '', $attributes = '')
    {
        $title = (string) $title;

        if ( ! is_array($uri))
        {
            $site_url = ( ! preg_match('!^\w+://! i', $uri)) ? site_url($uri) : $uri;
        }
        else
        {
            $site_url = site_url($uri);
        }

        if ($title == '')
        {
            $title = $site_url;
        }

        if ($attributes != '')
        {
            $attributes = _parse_attributes($attributes);
        }

        $current_url = (!empty($_SERVER['HTTPS'])) ? "https://".$_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI'] : "http://".$_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI'];
        $attributes .= ($site_url == $current_url) ? 'class="active"' : 'class="normal"';


        return'<a href="'.$site_url.'"'.$attributes.'>'.$title.'</a>';
    }
}

The view file:

<ulclass="topnav love"><liclass="topnav-1"><?=menu_anchor(base_url()."path/to/something", "menu_item")?></li><liclass="topnav-2"><?=menu_anchor(base_url()."path/to/something", "menu_item")?></li><liclass="topnav-3"><?=menu_anchor(base_url()."path/to/something", "menu_item")?></li><liclass="topnav-4"><?=menu_anchor(base_url()."path/to/something", "menu_item")?></li><liclass="topnav-5"><?=menu_anchor(base_url()."path/to/something", "menu_item")?></li></ul>

The css:

ul.topnav li.topnav-1 a.active { something clever }

Solution 4:

I use the below code - cheers!

<?phpecho ($this->uri->segment(1)=='dashboard' && $this->uri->segment(2)=='')? 'active' : ''; ?>

Solution 5:

I saw from the comment made above that perhaps you were looking for something a little bit more compact. There isn't a function like that in Codeigniter by default, but it's easy enough to make one. This is just something I put together as of now, but it might be what you want to have.

First, take a look at the URL helper in the manual. http://codeigniter.com/user_guide/helpers/url_helper.html

Look specifically at the anchor function and understand how to use. You should be in the habit to use this helper, the HTML helper and the form helper. It will improve your views. All the helpers are available for us in the system folder. What I did was I just opened up the URL helper and copied the anchor code, I then created my own helper file in the helper folder under application. You can read more about creating your own helpers and autoloading them in the manual.

I then made a few changes to it. The final result looks like this:

if ( ! function_exists('menu_anchor'))
{
    functionmenu_anchor($uri = '', $title = '', $attributes = '')
    {
        $title = (string) $title;

        if ( ! is_array($uri))
        {
            $site_url = ( ! preg_match('!^\w+://! i', $uri)) ? site_url($uri) : $uri;
        }
        else
        {
            $site_url = site_url($uri);
        }

        if ($title == '')
        {
            $title = $site_url;
        }

        if ($attributes != '')
        {
            $attributes = _parse_attributes($attributes);
        }

    $attributes .= ($site_url == current_url()) ? ' selected' : '';

        return'<a href="'.$site_url.'"'.$attributes.'>'.$title.'</a>';
    }
}

As you can see, it's only a one line modification: $attributes .= ($site_url == current_url()) ? ' selected' : '';

Basically, if the URL of the retrieved page matches the papge that the anchor links to, it adds the class selected. If you don't want the selected link to link anywhere specific, you can easily fix this as well by setting $site_url to # or something else.

Html5 Developer