PHP + CodeIgniter: Bootstrap nav-link active for sub directory

Question

New to Bootstrap here. I've been trying for a few hours now. Maybe there is something simple I am missing.

Basically, I'm trying to keep nav-link active when browsing in a sub-directory.

When I click on "Accounts" (site.com/accounts) it correctly marks nav-link as active.

Accounts is a list of accounts.

When I click on one of the accounts from the list we should go to the account (site.com/accounts/0000734174) but the Accounts nav-link in the sidebar is no longer active.

How do I keep it active while keeping the href "/accounts", because in my mind it should be. There are thousands of accounts and we wouldn't want a drop-down child nav-link for each.

Do I have the concept wrong? please help. Thanks

edit: let me add this is routed with code igniter as:

$route[ 'accounts/(:num)' ] = "accounts_details";
$route[ 'accounts' ] = "accounts_list";

And let me add what I've tried. different Jquery snippets found here on SO, different CSS failures, different routing ideas. And also this is in CoreUI Template using CodeIgniter framework.

More details: HTML-

<div class="sidebar">
    <nav class="sidebar-nav">
        <ul class="nav">
            <li class="nav-title">Navigation</li>
            <li class="nav-item">
                <a class="nav-link" href="<?php echo base_url(); ?>accounts">
                <i class="nav-icon icon-folder-alt"></i> Accounts</a>
            </li>
        </ul>
    </nav>
</div>

CSS-

.sidebar .nav-link.active {
  color: #fff;
  background: #3a4248;
}

So far the only way i can get it to work is by changing / to ? and using only a single controller for account list and account details. Is this the best way? — bdscorvette, Nov 23 '19 at 02:09
@Chiperific none of those. just Bootstrap 4, HTML5 i believe — bdscorvette, Nov 23 '19 at 04:25
You are using a framework, which is built on a language. Probably this: https://codeigniter.com/? — Chiperific, Nov 23 '19 at 04:31
Unless you are writing raw HTML files in your text editor, saving them as HTML files, uploading them via FTP to a server, and somehow linking and serving those assets through a stack... — Chiperific, Nov 23 '19 at 04:32

score 0 · Accepted Answer · edited Jun 20 '20 at 09:12

Update 1

Yep, you're on the wrong track. It's definitely not a Bootstrap issue.

however your comment about using one controller instead of two is a fine answer. And if it works, it's good. But, we have no idea of how CodeIgniter is setting the nav-link to active, so I think this is a good chance to learn about CodeIgniter and the Model-View-Controller architecture.

I don't know CodeIgniter, but looking at their docs, I'm guessing you're including the sidebar as a partial.

In your view pages (probably application/views/accounts_details and application/views/accounts_list) or in your controller, you must have some sort of call to a sidebar view.

What you want to do is set a PHP variable in your controller(s) and make that available to your views:

$data = array('active' => 'active');
$this->load->view('main_view', $data);

Then in your sidebar code, check for that variable.

<div class="sidebar">
    <nav class="sidebar-nav">
        <ul class="nav">
            <li class="nav-title">Navigation</li>
            <li class="nav-item">
                <a class="nav-link <?php echo $active; ?>" href="<?php echo base_url(); ?>accounts">
                <i class="nav-icon icon-folder-alt"></i> Accounts</a>
            </li>
        </ul>
    </nav>
</div>

I don't know CodeIgniter, but I think this tutorial will help.

Original Post

This is not a Bootstrap issue.

Bootstrap is styling whatever has the proper classes or DOM structure:

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a> <---- the 'active' class makes it pretty
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

But, as Bootstrap even points out, they don't handle styling .active in any special way:

"The base .nav component does not include any .active state. The following examples include the class, mainly to demonstrate that this particular class does not trigger any special styling."

In whatever language you're writing this in, you need to make sure you are adding the proper class to the proper element when the route includes "/accounts".

This could be done in Javascript using window.location to tell if the URL includes "/accounts/" and then using .addClass() to add the class active to that tag.

But, if you're using Angular, React, Vue, etc., there's probably a better way to do this within that language framework.

However, without seeing your HTML, I'm just guessing that CoreUI is using .active on the class to style your code this way.

Update your question with more code (HTML, CSS, JS) and a language and I'll gladly add some detail here.

Yes the sidebar is included as a partial. Its not code-igniter setting the active state because CI is only server side PHP framework. But I see your idea of doing it server side. Is it more desirable than JS solution? — bdscorvette, Nov 23 '19 at 05:04
With a server-side solution, the `active` will be instantly on the DOM. With JS, there's technically a delay. — Chiperific, Nov 23 '19 at 05:05
Thank you for your help, yes, server side solution is working — bdscorvette, Nov 23 '19 at 05:30

PHP + CodeIgniter: Bootstrap nav-link active for sub directory

1 Answers1

Update 1

Original Post