Top Bar Extension

Litalino

A Flarum extension. Allows to create a customizable Top Bar.

Scrolled

Admin

Mobile

Installation

Install with composer:
composer require litalino/flarum-top-bar:"*"

Updating
composer update litalino/flarum-top-bar:"*"
php flarum migrate
php flarum cache:clear

Links

Packagist
GitHub

Add Code 🇦

<ul>
                <li class="TopBar-item"><a href="#" external="" target="_blank" title="Private Customers">Private Customers</a></li>
                <li class="TopBar-item"><a href="#" external="" target="_blank" title="Business Customers">Business Customers</a></li>
                <li class="TopBar-item"><a href="#" external="" target="_blank" title="Help">Help</a></li>
                <li class="TopBar-item"><a href="#" external="" target="_blank" title="Cookie">Cookie</a></li>
                <li class="TopBar-item"><a href="#" external="" target="_blank" title="My Sunrise">My Sunrise</a></li>
</ul>

If you want the top bar tag to be on the left: add the bottom css to Custom Styles: Admin -> Appearance -> Custom Styles

 .TopBar ul {
     justify-content: flex-start !important;
}

Demo: https://khatvongsong.vn/

joanaranda

Litalino Add Code 🇦
<ul>
<li class="TopBar-item"><a href="#" external="" target="blank" title="Private Customers">Private Customers</a></li>
<li class="TopBar-item"><a href="#" external="" target="blank" title="Business Customers">Business Customers</a></li>
<li class="TopBar-item"><a href="#" external="" target="blank" title="Help">Help</a></li>
<li class="TopBar-item"><a href="#" external="" target="blank" title="Cookie">Cookie</a></li>
<li class="TopBar-item"><a href="#" external="" target="_blank" title="My Sunrise">My Sunrise</a></li>
</ul>

@Litalino et al, how should I modify the menu to add submenus? I see that the flarum-top-bar\less\forum.less file handles a Dropdown-menu class, but I am unable to deduct the syntax to use it.

joanaranda

Great work, @Litalino. I'm being an early adopter of your extension. I really consider it very helpful. In any case, I think it only works with sites with a white header, which fully breaks my site design. Otherwise, it produces the effect below:

I think it would be very valuable to extend it also for Colored headers, as this is a standard feature in Flarum which can be activated from Appearance > Colored Header in the admin menu:

I hope it is easy to reproduce in your own setup. Unfortunately, I need to disable the extension right away in my own environment, as I have already got some user complains.

Litalino

joanaranda

Thank you for using the utility and developing with me...

I discovered this error.. just adding 2, 3 lines of css fixed it..

I did it but couldn't update it in time... because I was on vacation with another project
In addition, I also added css for the functional "drop-down menu"

Update 1.4.0

composer update litalino/flarum-top-bar:"*"
php flarum migrate
php flarum cache:clear

README: Litalino/flarum-top-barblob/main/README.md

joanaranda

Awesome, @Litalino. This works greats now! I've already added your fix in my own forum and it looks really professional. Thanks a lot for your excellent work and for publishing this fix so quickly!

Litalino

joanaranda Good

joanaranda

@Litalino et al, finally I had time to investigate it, so now I can answer my own question on how dropdowns can be added to Litalino's top bar extension. Given a menu like:

<ul>
  <li class="TopBar-item">
    <a href="https://your-link-1/" title="1st menu item">1st menu item</a>
  </li>
  <li class="TopBar-item">
    <a href="https://your-link-2/" title="2nd menu item">2nd menu item</a>
  </li>
</ul>

dropdowns can be added by placing the following content inside each the <li> tag for each menu option that must become a dropdown:

a <div> tag encapsulating the whole <li> item. It must include the classes ButtonGroup, Dropdown and dropdown (yes, Dropdown and dropdown are different classes).
the a link that typically contains the menu item name, must include the data-toggle"dropdown" (and, preferably, aria-expanded="false"), and replace its href to "#". You may want to add <i class="fas fa-caret-down"></i> to show a caret that indicates that this item can be expanded.
a <ul> tag that contains the classes Dropdown-menu and dropdown-menu as a placeholder for each menu item in the dropdown. Each menu item inside the dropdown must be constructed with <li><a> tags as usual. You may want to add also the Dropdown-menu--right class if you want the dropdown menu to be aligned to the right.

In other words, for the menu in my initial exemple, the code below would add two dropdowns with two menu items each as follows:

<ul>
  <li class="TopBar-item">
    <a href="https://your-link-1/" title="1st menu item">1st menu item</a>
  </li>
  <li class="TopBar-item">
    <a href="https://your-link-2/" title="2nd menu item">2nd menu item</a>
  </li>
  <li class="TopBar-item">
    <div class="ButtonGroup Dropdown dropdown">
      <a hfer="#" data-toggle="dropdown" aria-expanded="false">1st dropdown <i class="fas fa-caret-down"></i></a>
      <ul class="Dropdown-menu dropdown-menu Dropdown-menu--right">
        <li>
          <a href="https://your-link-3/" title="1st item in 1st dropdown">1st item in 1st dropdown</a>
        </li>
        <li>
          <a href="https://your-link-4/" title="2nd item in 1st dropdown">2nd item in 1st dropdown</a>
        </li>
       </ul>
    </div>
  </li>
  <li class="TopBar-item">
    <div class="ButtonGroup Dropdown dropdown">
      <a hfer="#" data-toggle="dropdown" aria-expanded="false">2nd dropdown <i class="fas fa-caret-down"></i></a>
      <ul class="Dropdown-menu dropdown-menu Dropdown-menu--right">
        <li>
          <a href="https://your-link-5/" title="1st item in 2nd dropdown">1st item in 2nd dropdown</a>
        </li>
        <li>
          <a href="https://your-link-6/" title="2nd item in 2nd dropdown">2nd item in 2nd dropdown</a>
        </li>
       </ul>
    </div>
  </li>
</ul>

Gerriet

Hey 🫠
Very nice menu extension 🫠