Semantic-UI 🚀 - [Menu] Make Fixed Menu Collapsable

I agree that all menus should reformat to vertical menus when at mobile widths. With fixed menus converting to collapsible, click-to-open menus. The issue with click-to-open menus though is they require javascript.

Which means there would need to be a behavioral extension to menu to handle this.

jlukic on 4 Oct 2013

👍5

Trying out semantic for the first time and looking for this too. Spoiled by bootstrap :-).

isimmons on 8 Mar 2014

Any updates on this?
I read in another issue "Menus will have responsive variations". Any definite release date?

feidens on 28 May 2014

Seeing the amount of activity on this, I'll prioritize this for this or next week.

jlukic on 29 May 2014

😕4 🎉2

+1

rcarter on 29 May 2014

+1. This will be super useful.

dpanov on 12 Jun 2014

+1 This is a must.

whothisbeme on 10 Jul 2014

Hey @jlukic, If you need any help implementing this, I would be happy to take a shot at it. Just let me know if you had any plans/ideas for how you wanted it to be implemented...

mzbyszynski on 12 Aug 2014

❤4

+1 :)

rkkautsar on 21 Oct 2014

Seems like with 1.0, "right menu" does not work with mobile. Instead of collapsing (a-la bootstrap) it wraps around.

Was this resolved and I'm missing something? if so, is there an example?

Anyone figured a workaround to do this "manually"?

raniglas on 26 Nov 2014

Has this been done??

mvdkleijn on 8 Dec 2014

It has not been done yet.

jlukic on 8 Dec 2014

😕11

+1

trevorhreed on 17 Dec 2014

+1 must have

jmasejo on 29 Dec 2014

Is there a time frame when this might possibly be implemented?

whothisbeme on 7 Jan 2015

I would say after #1571 which is my main focus right now.

jlukic on 7 Jan 2015

😕1

+1

I'm using the sidebar component in the meantime, but this is definitely a staple now.

tirdadc on 6 Feb 2015

+1

piernik on 3 Mar 2015

+1

pcriv on 12 Mar 2015

:+1:

olurin on 13 Mar 2015

+1 Would also love to help in the implementation if needed.

bhanuc on 14 May 2015

+1

kareem2 on 8 Jun 2015

+1

avaz on 13 Jun 2015

+1

pagenoare on 21 Jun 2015

+1

Erbenos on 22 Jun 2015

+1

lsunsi on 27 Jun 2015

+1

serkan-koyuncu on 28 Jun 2015

really beautiful css framework !
much appreciate your work , thank you!

1 for this :)

SpareShade on 2 Jul 2015

This is something I would love to see as well. Do not want to load a separate menu just for this.

iamshipon1988 on 8 Jul 2015

+1 framework good like this one deserves it

10robinho on 11 Jul 2015

+1 I notice that when you use stackable menus in 2.0 with the tab feature on mobile the menu just makes the tabs not viewable making the whole site non mobile friendly.

BigGrecian on 16 Jul 2015

+1

haguro on 30 Jul 2015

+1 for stackable collapse menu

n4uti on 2 Aug 2015

+1 for me too.

marcusmoore on 4 Aug 2015

+1

saleem-latif on 21 Aug 2015

+1

MahdiMajidzadeh on 4 Sep 2015

Sad to be one more to add a +1 here, with the issue having almost hit its second aniversary. This seems such a mandatory feature for nowadays mobile needs. I tried to implement something similar using mobile only/computer only classes but they only work for rows/columns, and messed a lot with the menu classes. Please, take a look at this! :(

igorsantos07 on 18 Sep 2015

👍7

I use bootstrap navbar unfortunately

MahdiMajidzadeh on 18 Sep 2015

Isn't it too much overhead to use both frameworks? Or did you manage to
extract only the navbar from bootstrap?
On 18 Sep 2015 05:18, "Mahdi Majidzadeh" [email protected] wrote:

I use bootstrap navbar unfortunately

—
Reply to this email directly or view it on GitHub
https://github.com/Semantic-Org/Semantic-UI/issues/157#issuecomment-141378624
.

igorsantos07 on 18 Sep 2015

At the core of this issue in my mind is - what is the architecture decision in Semantic to handle this using either - mostly responsive solution or event / JavaScript to handle it? I need to pour over docs to see if I can determine, identify that...

This is one example of something needed, there are plenty more like this - but, they all should follow the same core tenets of the Semantic UI way...

And should this be more of how you form a "recipe" to use many Semantic elements combined to form a more strict component like this?

dkovach on 18 Sep 2015

yes, only bootstrap nabvar

On Fri, Sep 18, 2015 at 7:04 PM, Igor Santos [email protected]
wrote:

Isn't it too much overhead to use both frameworks? Or did you manage to
extract only the navbar from bootstrap?
On 18 Sep 2015 05:18, "Mahdi Majidzadeh" [email protected] wrote:

I use bootstrap navbar unfortunately

—
Reply to this email directly or view it on GitHub
<
https://github.com/Semantic-Org/Semantic-UI/issues/157#issuecomment-141378624

.

—
Reply to this email directly or view it on GitHub
https://github.com/Semantic-Org/Semantic-UI/issues/157#issuecomment-141470412
.

MahdiMajidzadeh on 21 Sep 2015

+1

rafaeljuzwiak on 24 Sep 2015

+1 for all +1s

n4uti on 26 Sep 2015

+1

ConsoleTVs on 30 Sep 2015

+1

rickydavila on 20 Oct 2015

+1

space-alien on 1 Nov 2015

+1

hypn0s on 20 Nov 2015

+1

jianglu on 24 Nov 2015

+1

tomasswood on 30 Nov 2015

+1

anonrig on 7 Dec 2015

This is crucial deciding factor to use between semantic and bootstrap. +1 for this feature and hopefully it will get added to the framework.

iainheng on 8 Dec 2015

👍2

Not relating to collapsing, but the "right menu" comment from @raniglas:

Inserting an empty "right menu" div prior to menu items I wanted to have on the right, ended up with a reasonable mobile stacked menu. Open to any suggestions on alternatives.

<div class="ui stackable menu">
  <a class="item">Left Item 1</a>
  <a class="item">Left Item 2</a>
  <div class="right menu">
  </div>
  <a class="item">Right Item 1</a>
  <a class="item">Right Item 2</a>
</div>

davidkuhta on 8 Dec 2015

Hi, I found an implementation of this feature here http://codepen.io/anon/pen/zrBBoa
It will be awesome if you incorpore that in the sources.

fulapol on 21 Dec 2015

👍3

+1, hacking my own collapsible menu makes Semantic-UI a much less attractive option. I like Semantic's styling more than Bootstrap, but that collapsible menu is a crucial piece of any responsive, mobile-ready UI framework.

john-osullivan on 21 Dec 2015

👍3

Any news according to this feature?
I still run semantic ui 1.x, waiting just for this for upgrading the libs. The menu in 1.x is much more responsive than the one in 2.x.

n4uti on 19 Jan 2016

+1

svansoeren on 19 Jan 2016

+1 This helped me: http://ehkoo.github.io/semantic-ui-examples/navbar/

yuriolive on 20 Jan 2016

👍2

agreed, but you can not expand and collapse the drop-downs in that solution when in mobile view.

svansoeren on 21 Jan 2016

I'm very surprised that after more than 2 years, this still isn't implemented... +1 for this issue.

heejongahn on 31 Jan 2016

+1

mako87 on 1 Feb 2016

+1

sos0 on 6 Feb 2016

+1. Collapsable menu is a kinda must.

huangtao800 on 15 Feb 2016

+1

devcsrj on 15 Feb 2016

+1

sos0 on 16 Feb 2016

successfully migrated back to bootstrap, collapsible menu works very well there. thanks for the good time with semanic ui! will watch this issue to be informed when it will be done. hopefully it will not hit its 3rd anniversary. best regards.

n4uti on 28 Feb 2016

👍9 👎2

:wink:

jlukic on 29 Feb 2016

👎4

+1

aleksanderd on 7 Mar 2016

+1

zuck on 9 Mar 2016

+1

Golpha on 12 Mar 2016

👍4

+1

anonrig on 13 Mar 2016

+1

DomiR on 6 Apr 2016

+1

elihall on 7 Apr 2016

The amount of vitriol i've received about this particular issue...

jlukic on 8 Apr 2016

😕1

Well it is the second most commented open issue on the repo, and the first one at least has a piece of quality code which just needs to get merged to master... I think we'd all reeeeally like to see this get built, or at least understand if there's something particularly difficult about implementing it.

john-osullivan on 8 Apr 2016

👍15

@jlukic Have you considered using a checkbox to work around the javascript requirement? The checkbox could hold the opened/closed state and toggle CSS classes (example). I don't know if you're still against using javascript for the collapsible functionality (as per the original response to the issue).

There is a pure javascript solution(?) floating around in the internet, but I'm not sure this is the right way to go, has anyone else worked this out?

Btw, thanks to the devs for the awesome work! Consider all the guys asking for this feature as people who don't want to use other frameworks!

abijr on 16 Apr 2016

👍1

+1

kurt-o-sys on 11 May 2016

I think an external plugin for a collapsible menu should be made available. Semantic UI beats Bootstrap for me - I was just about to redesign my whole site - but the lack of the menu has made me reconsider :(

zaarheed on 29 May 2016

👍1

Just use a separate menu for mobile and show it using media queries.

jlukic on 29 May 2016

👎36 😕5 🎉2 👍1

+1

jimmyn on 10 Jun 2016

+1

frthjf on 12 Jun 2016

Check #1114

niksmac on 15 Jun 2016

+1

neokio on 30 Jun 2016

+1

ghirlekar on 2 Jul 2016

+1

ghost on 18 Jul 2016

@jlukic Isn't stuff like this kind of the point in using a framework? :confused:

For me this seems to be a strange response in light of my remark... would you be willing to let us know the reasoning here? :smile:

Just use a separate menu for mobile and show it using media queries.

mvdkleijn on 20 Jul 2016

👍17

+1

kevinstory on 20 Jul 2016

👎2

+1

ghost on 3 Aug 2016

👎2

+1

MoorsTech on 4 Aug 2016

👎3

+1

AlexAHK on 16 Aug 2016

👎3

Just use a separate menu for mobile and show it using media queries.

why can't you build this in like columns? where we can do for example
sixteen wide tablet twelve wide computer column

I want to show fixed menus on both mobile and desktop but when showing on mobile it cuts off any menu items which are too wide, I simply want the text labels to disappear on mobile so only the icons show, this way I can at least show 5-6 items...

robbielove on 26 Aug 2016

:+1: +1

omidp on 3 Sep 2016

It's been more than 3 years and because of this task Semantic.ui seems the worst framework to work with.

anonrig on 4 Sep 2016

👎4 👍2

That's an exaggeration. A workaround exists. Use a separate menu for mobile and show it using media queries. It's shitty but to call Semantic the worst framework to work with because of this one thing is ridiculous.

dangerous on 6 Sep 2016

👍8

It's possible to achieve but i'm more interested in getting the collapse/expand from this mobile version menu to animate instead of appear, similar to 'ui sidebar's bottom push'.
Any idea how to achieve this?

tsilcher on 6 Sep 2016

UI Framework with 27k stars that doesn't support a basic collapsable menu is okay, but my response is an exaggeration.

Funny world.

anonrig on 6 Sep 2016

😄3 🎉1 👎1

I want my money back, too!

Or in other words: seems this is not so important to anyone in order to actually implement it, otherwise it would have been done. If it's to you, why not do it?

PhilLehmann on 6 Sep 2016

Can this be achieved using an accordion and triggering it from the menu icon?
I cannot seem to get it working but maybe someone can give it a try. :-)

tsilcher on 7 Sep 2016

been 3 years...

Apu889 on 21 Sep 2016

👎1

It's really strange that Semantic UI don't offers a simple responsive menu.

gvernile on 28 Sep 2016

👎2 👍2 🎉1

http://ehkoo.github.io/semantic-ui-examples/navbar/ - here is an example of collapsable navigation bar, but it requires rendering menu items twice.

ivantcholakov on 28 Sep 2016

👍1

@ivantcholakov , All responsive design philosophy is do every thing once!!

MahdiMajidzadeh on 28 Sep 2016

👎1 👍1

+1

carlos2031 on 6 Oct 2016

http://chineque.com.br/labs/navbeer/ - another example, the menu is to be rendered only once.

Edit 20-OCT-2016: https://github.com/ezpabon/navbeer

ivantcholakov on 8 Oct 2016

👍3

After a week of trying out Semantic UI I am ditching it and going back to Bootstrap. This issue coupled with lack of always open sidebar that doesn't push content makes this a pretty painful framework to work with.

jeitnier on 10 Oct 2016

👍2 😄1

I'm sorry that you're leaving SUI. There is a collapsible menu but it is quite limited in scope. There is generally no way to support the full features of menu for mobile in a consistent way without a large amount of css code duplication.

I do think however the downsides to including separate html to render your mobile menu is negligible. Generally you'll want to organize the links in a different way, use different styles and remove items for mobile. The only downside to including it twice is 'lack of elegance' which I can understand how would upsetting for devs and a few more text over the wire.

jlukic on 10 Oct 2016

👍6

Confused about this.
Can there at least be a solution and explanation in the docs?

GramParallelo on 30 Oct 2016

👍2

Is there any good practice using semantic UI to make menu good on mobile phone?

tarvos21 on 23 Nov 2016

👍3

+1

ghost on 27 Nov 2016

👍1

@tarvos21
http://iridadesign.com/starter-public-edition-4/www/ - see the blue top menu, extract the HTML using your browser. This is what I am capable to have for now.

Note: After copying the snippet, for non-customized Semantic UI replace the following:

<div class="mobile hidden row">

with

<div class="computer tablet only row">

ivantcholakov on 28 Nov 2016

👍6 ❤1

@ivantcholakov
good solution, it seems to work, thanks for sharing!

tarvos21 on 28 Nov 2016

Still waiting for this

ydaniels on 4 Jan 2017

+1

yangar on 16 Feb 2017

👍1

Please use GitHub reactions instead of just posting +1.

🥂

vinayakkulkarni on 17 Feb 2017

👍14 🎉2

Just for those in need I have come up with a workaround, here is the code. It is simply a ui simple dropdown item that works on mobile and no JS required. I know it is not the same but this might help someone.

<div class="ui borderless fixed stackable main menu">
    <div class="ui text container">
        <a href="#" class="header item">
            <img class="logo">
            SITENAME
        </a>
        <div class="right menu">
        <div class="ui simple dropdown item">
        Menu
        <i class="dropdown icon"></i>
        <div class="menu">
            <a href="#" class="item">item</a>
        </div>
        </div>
        </div>
    </div>
</div>

ghost on 18 Feb 2017

Since this feature obviously isn't going to be implemented (it's been over three years), can you perhaps include an example in the docs (menu maybe?) explaining how to create a mobile-responsive navbar with media queries?

macjabeth on 17 Mar 2017

👍9

👍

mazing on 21 Mar 2017

👎5 😄1

Dumbledore: "After all these years?"
Snape: "Always"

+1

niiapa on 23 Mar 2017

😄6 ❤2

It's seriously sad that such a basic thing has been forgotten, really enjoyed working with Semantic while it lasted but i refuse to spend more time on making 2 menus (A sidebar and a menu) to have a working Responsive Navigation. Double the effort for something that should ease the process.

+1 (Will revisit S.UI if added in future RCs)

AtomiCAST on 26 Mar 2017

+1

b-corentin on 27 Mar 2017

Here is a solution that behaves like Bootstrap and does not require a second set of menu items. It requires just a tiny bit of JS and CSS.
The JS:

$(function() {
// Set up to handle wrapping of tab menu (tab actuator) items
    $(window).resize(function() {
      checkIfWrapped();
    });

    checkIfWrapped(); // Make sure the function is fired upon document ready
});

```javascript
// Detect whether a Semantic UI tabular menu is wrapped
function checkIfWrapped() {
var pos_top_1st = $('.tabular.menu .item').first().position().top;
$('.tabular.menu .item:not(first-child)').each(function() {
var pos_top = $(this).position().top;
if (pos_top > pos_top_1st) {
$(this).parent().addClass('wrapped');
return;
} else if (pos_top == pos_top_1st) {
$(this).parent().removeClass('wrapped');
}
});

The HTML structure.  (Note that placing the .tabular.menu .item-s  inside a div within the overall .tabular.menu allows the use of a separate .right.menu within the .tabular.menu if desired) :
```html
          <div id="tabs-menu" class="ui top attached tabular menu">
              <div id="qj-tabs">
                  <div class="tab item"></div>
                  <div class="tab item"></div>
                  <div class="tab item"></div>
              </div>
              <div class="right menu">
                  <a class="tab item"><i class="add icon"></i> Add Job</a>
                  <a class="tab item"><i class="copy icon"></i> Copy Item</a>
              </div>
          </div>
              <div class="botttom attached tab segment"></div>
              <div class="botttom attached tab segment"></div>
        </div>

The CSS:

#qj-tabs {
  display: flex !important;   /* Will not work unless defined as display: flex */
  flex-direction: row !important;
  flex-wrap: wrap !important;
}

#tabs-menu .wrapped .item {
  border-radius: 5px !important;
  border: 1px lightgray solid !important; /*  Just styling for the default theme here */
  margin: 0 2px 2px 0 !important;
}

#tabs-menu .wrapped .active.item {
    background-color: lightgray;
}

Thanks to Mr. Boris the answer here that got me started on this solution.

DanielSwain on 28 Mar 2017

👍4

@jlukic
Would love to see a solution for this issue.

Thank you

icodebuster on 29 Mar 2017

Any working solution on this issue yet?

ghost on 17 Apr 2017

@andrewoko-odion Doesn't seem like there's much being done about this, it has been opened since 2013 and yet no solution right out of the box. Only shared code to try and imitate the behavior which i still refuse to make use of if i don't need to when something so simple and required this days should be already be implemented on the framework itself.

AtomiCAST on 17 Apr 2017

👍7

Absolutely agree with @DualPixel
+1

nicolay-zlobin on 22 Apr 2017

👎2

As much as I like Semantic, I gotta say that this is a deal breaker for me. As soon as this gets fixed, I'm all in.

+1

CanadianEngineer on 25 Apr 2017

👍1

+1

pierre-H on 2 May 2017

👎4 😄1

@CanadianEngineer, @pierre-H You might want to look at the solution I posted on March 28th just above here. It's really easy to implement. I do agree that this needs to be implemented into the main library though.

DanielSwain on 2 May 2017

Any working solution on this issue yet?

yildiz on 24 May 2017

+1

MoezGholami on 15 Jun 2017

Wow! I really don't understand why the core team of semantic ui don't want to consider a responsive menu. This should have been a great framework to compete well enough with Bootstrap but the lack of support for responsive menu is just so painful. @jlukic should see that this feature is one which everyone wants and then make it a priority, please!

Pythonian on 15 Jun 2017

👍12 🎉1

@Pythonian totally agree! +1

jimmyn on 15 Jun 2017

Same for me, I really enjoy semantic ui but this function should be native since a long long time...

dayze on 30 Jun 2017

Waiting, please implement + 100000000

HerrNiklasRaab on 11 Jul 2017

+1

gino on 11 Jul 2017

👎2

+1

Ash-oi on 12 Jul 2017

👎2

+1
I'm not as vehemently opposed as some to having two separate layouts for a menu (using React makes creating that not too much of a chore and maintains just a single source location). However, I'd agree that this should really be consider a necessity for a modern, full-featured suite of styling tools such as Semantic.

ewhite on 17 Jul 2017

👍2

+1

dawidsappich on 17 Jul 2017

👎1

After 4 years getting "+1" mails from this thread I'll mute this now. Anyway, bye!

n4uti on 17 Jul 2017

😕1

SUI newbie here:
Really, guys, if you don't want to complicate something in your code because of adding responsive menu, so just write and add some right example of responsive menu with semantic-ui to your docs. Why did you chose to confuse your community with such answers like "just add another menu". You could just explain your point of view in your docs. Tell to everybody why it's a goodness to have a two separate menus for mobile and wide-screens. Then add working good example and close this issue. What's a problem? Why did you prefer to have opened 4 year old issue?